javascript Google Maps API中的动态侦听器[重复]

Posted 2023-02-23

【中文标题】javascript Google Maps API中的动态侦听器[重复]

【英文标题】：Dynamic listener in javascript Google Maps API [duplicate]

【发布时间】：2015-08-05 16:13:15

【问题描述】：

我有源 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>

【参考方案1】：

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

工作代码sn-p：

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>

【参考方案2】：

您的问题是您的事件侦听器是异步的，因此当它被调用时，for 循环已到达末尾，而 contentString 的值在末尾。你需要修复你的范围。

【讨论】：

你到底是什么意思？