谷歌地图API信息窗口只显示数组的最后一条语句

Google maps API infowindow showing only last statement from array

本文关键字：数组 最后 一条 语句 显示 API 信息 信息窗 窗口 谷歌地图      更新时间：2023-09-26

我有这个代码。添加标记工作很好，但正确的信息窗口标记不…(标题也有标记)

它只返回数组infoUser中所有标记的最后语句。

我知道. .我在重复一个问题，但我试着用很多回答的问题来修复它，但它不起作用。

    function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 3,
          center: {lat: 49.7437895, lng: 15.3360726}
        });
//array
        var infoUser = [
            ['Germany','Maj','TUC','20','300'],
            ['Czech Republic','admin','Bla','50','400'],
            ['Italy','HOOOO','BUC','1','50'],
            ['Italy','aaaaa','aaa','10','20'],
            ['Germany','adminek','hopinek','50','1000']
        ]; 
        var infoWindow = new google.maps.InfoWindow();
        var markerCluster = new MarkerClusterer(map, markers,
      {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
        var markers = [];
        for (var x = 0; x < infoUser.length; x++) {
            var adresa = infoUser[x][0],
                name = infoUser[x][1],
                firstname = infoUser[x][2],
                age =  infoUser[x][3],
                price =  infoUser[x][4];    
          $.getJSON('http://maps.googleapis.com/maps/api/geocode/json?address='+adresa, null, function (data) {
              var p = data.results[0].geometry.location;
              var latlng = new google.maps.LatLng(p.lat, p.lng);
              var marker = new google.maps.Marker({
                position: latlng,
                title: adresa,
                map: map
              }); markers.push(marker); markerCluster.addMarker(marker);
              var content = 'Adresa: ' + adresa + 'username: ' + name;
              google.maps.event.addListener(marker,'click', (function(marker, content, infoWindow){ 
                    return function() {
                        infoWindow.setContent(content);
                        infoWindow.open(map,marker);
                    };
                })(marker, content, infoWindow)); 
          });
        }
    }

您需要对地理编码器调用(adresa和name)以及信息窗口content/marker/infoWindow以外的数据进行函数闭包:

工作小提琴

代码片段:

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 3,
    center: {
      lat: 49.7437895,
      lng: 15.3360726
    }
  });
  //array
  var infoUser = [
    ['Germany', 'Maj', 'TUC', '20', '300'],
    ['Czech Republic', 'admin', 'Bla', '50', '400'],
    ['Italy', 'HOOOO', 'BUC', '1', '50'],
    ['Italy', 'aaaaa', 'aaa', '10', '20'],
    ['Germany', 'adminek', 'hopinek', '50', '1000']
  ];
  var infoWindow = new google.maps.InfoWindow();
  var markerCluster = new MarkerClusterer(map, markers, {
    maxZoom: 18,
    imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
  });
  var markers = [];
  for (var x = 0; x < infoUser.length; x++) {
    var adresa = infoUser[x][0],
      name = infoUser[x][1],
      firstname = infoUser[x][2],
      age = infoUser[x][3],
      price = infoUser[x][4];
    $.getJSON('http://maps.googleapis.com/maps/api/geocode/json?address=' + adresa, null, function(adresa, name) {
      return function(data) {
        var p = data.results[0].geometry.location;
        var latlng = new google.maps.LatLng(p.lat, p.lng);
        var marker = new google.maps.Marker({
          position: latlng,
          title: adresa,
          map: map
        });
        markers.push(marker);
        markerCluster.addMarker(marker);
        var content = 'Adresa: ' + adresa + '<br>username: ' + name;
        google.maps.event.addListener(marker, 'click', (function(marker, content, infoWindow) {
          return function() {
            infoWindow.setContent(content);
            infoWindow.open(map, marker);
          };
        })(marker, content, infoWindow));
      }
    }(adresa, name));
  }
}
google.maps.event.addDomListener(window, "load", initMap);
html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://cdn.rawgit.com/googlemaps/v3-utility-library/master/markerclustererplus/src/markerclusterer.js"></script>
<div id="map"></div>

相关文章：