javascript Google 地图中的动态侦听器 API

Question

我有源 JSON 文件和 javascript 代码。我想从 JSON 动态加载标记。对于每个标记都有一个 contentString，它必须在单击标记后显示。但问题是，在点击 first 标记后，会显示标记 two 信息。有没有解决方案，什么是最好的？

JSON:

[  
   {  
      "Nazev":"Pobocka 1",
      "Mesto":"Praha",
      "Ulice":"Nejvetsi 35\/352",
      "PSC":"12345",
      "Web":"www.praha.cz",
      "Lat":"50.0596696",
      "Long":"14.4656239"
   },
   {  
      "Nazev":"Pobocka 2",
      "Mesto":"Brno",
      "Ulice":"Nejmensi 384\/64",
      "PSC":"54321",
      "Web":"www.brno.cz",
      "Lat":"49.2020701",
      "Long":"16.5779606"
   }
]

Javascript 来源：

<script>
function initialize() {
  var json = getdata();
  var center = new google.maps.LatLng(49.9789391,15.6342143);
  var mapOptions = {
    zoom: 8,
    center: center
  }
  var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  for( i = 0; i < json.length; i++) {
            var Nazev =  json[i].Nazev;
            var Mesto =  json[i].Mesto;
            var Ulice =  json[i].Ulice;
            var PSC   =  json[i].PSC;
            var Web   =  json[i].Web;
            var Lat   =  json[i].Lat;
            var Long  =  json[i].Long;
            var contentString = "<b>"+Nazev+"</b><br>"+Mesto+"<br>"+Ulice+"<br>"+PSC+"<br><a href='http://"+Web+"'>"+Web+"</a>";
            var latLng = new google.maps.LatLng(Lat,Long);
            var marker = new google.maps.Marker({
                position: latLng,
                map: map
            });

            var infowindow = new google.maps.InfoWindow({
                content: contentString
            });
            google.maps.event.addListener(marker, 'click', function() {
              infowindow.open(map,marker);
            });


        }

}

google.maps.event.addDomListener(window, 'load', initialize);

    </script>

Answer 1

你的问题是你的事件侦听器是异步的，所以当它被调用时，for 循环已经结束并且 contentString 的值在最后。您需要修复范围。

Answer 2

这是 Google Maps JS API v3 - Simple Multiple Marker Example

的副本

工作代码片段：

function initialize() {
  var json = [{
    "Nazev": "Pobocka 1",
    "Mesto": "Praha",
    "Ulice": "Nejvetsi 35\/352",
    "PSC": "12345",
    "Web": "www.praha.cz",
    "Lat": "50.0596696",
    "Long": "14.4656239"
  }, {
    "Nazev": "Pobocka 2",
    "Mesto": "Brno",
    "Ulice": "Nejmensi 384\/64",
    "PSC": "54321",
    "Web": "www.brno.cz",
    "Lat": "49.2020701",
    "Long": "16.5779606"
  }];
  var center = new google.maps.LatLng(49.9789391, 15.6342143);
  var mapOptions = {
    zoom: 8,
    center: center
  }
  var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  for (i = 0; i < json.length; i++) {
    var Nazev = json[i].Nazev;
    var Mesto = json[i].Mesto;
    var Ulice = json[i].Ulice;
    var PSC = json[i].PSC;
    var Web = json[i].Web;
    var Lat = json[i].Lat;
    var Long = json[i].Long;
    var contentString = "<b>" + Nazev + "</b><br>" + Mesto + "<br>" + Ulice + "<br>" + PSC + "<br><a href='http://" + Web + "'>" + Web + "</a>";
    var latLng = new google.maps.LatLng(Lat, Long);
    var marker = new google.maps.Marker({
      position: latLng,
      map: map
    });

    var infowindow = new google.maps.InfoWindow({
      content: contentString
    });

    google.maps.event.addListener(marker, 'click', (function(marker, contentString) {
      return function() {
        infowindow.setContent(contentString);
        infowindow.open(map, marker);
      }
    })(marker, contentString));

  }

}

google.maps.event.addDomListener(window, 'load', initialize);

html,
body,
#map-canvas {
  height: 500px;
  width: 500px;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map-canvas" style="border: 2px solid #3872ac;"></div>

javascript Google 地图中的动态侦听器 API

Dynamic listener in javascript Google Maps API

javascript

google-maps

google-maps-markers