javascript - 谷歌地图点击事件无法完全正确工作

Question

我使用以下脚本生成此 page

function initialize() {
  var mapCanvas = document.getElementById('map');
  var mapOptions = {center:new google.maps.LatLng(latitudeMid,longitudeMid),zoom:15,mapTypeId:google.maps.MapTypeId.ROADMAP,streetViewControl:false,mapTypeControl:true,scaleControl:true,scaleControlOptions:{position:google.maps.ControlPosition.TOP_RIGHT}};
  var map = new google.maps.Map(mapCanvas, mapOptions);
  var i;
  var insertion;
  var previousMarker;
  // -------------------------------
  //show locations on the map
  // -------------------------------
  for (i = 0; i < fotoCount; i++)  { 
    var myLatLng=new google.maps.LatLng(Latituden[i], Longituden[i]); 
    var marker = new StyledMarker({styleIcon:new StyledIcon(StyledIconTypes.MARKER,{color:'00ff00',text:Letters[i]}),position:myLatLng,map:map});
    marker.set('zIndex', -i);
    insertion='<img src=\"http://www.pdavis.nl/Ams/'.concat(Bestanden[i],'.jpg\"></img>'); 
    insertion=insertion.concat('<table class=width100><tr><td>Bestand: ',Bestanden[i],'</td><td class=pright>Lokatie: ',Latituden[i],' °N., ',Longituden[i],' °E. (',Letters[i],')</td>');
    insertion=insertion.concat('<td class=pright>Genomen: ',Datums[i],'</td></tr><td colspan=3>Object: ',Objecten[i],'</td></table>');
    google.maps.event.addListener(marker, 'click', function() {
      $('#photo').html(insertion);
      this.styleIcon.set('color', 'ff0000');
      if(previousMarker!=null){previousMarker.styleIcon.set('color', '00ff00')};
      previousMarker=this;
      });
  }  

单击标记应执行两件事:(i) 将标记变为红色(以及任何现有的红色标记变为绿色)，以及 (ii) 在右侧面板中显示带有信息的相应照片。第一个确实有效，但第二个总是显示与最后一个标记相对应的照片。使用 “警报(插入)；”显示这对于每个标记都是正确的。

Answer 1

你不能这样做，因为在循环结束时，“i”将始终是最后一个索引。当然，当您单击标记时，回调中的“i”值是最后一个索引，因此您应该始终显示最后一张图片。

由于 i 值的原因，仅将插入代码放入点击回调中是不够的。您没有绑定(bind)任何内容来修复回调中的值，因此您将遇到同样的问题。

以下解决方案使用标记对象来绑定(bind)“i”值，这样您就可以在回调中使用它。

在您的页面上测试了脚本:)。

根据需要进行调整!

function initialize() {
  var mapCanvas = document.getElementById('map');
  var mapOptions = {center:new google.maps.LatLng(latitudeMid,longitudeMid),zoom:15,mapTypeId:google.maps.MapTypeId.ROADMAP,streetViewControl:false,mapTypeControl:true,scaleControl:true,scaleControlOptions:{position:google.maps.ControlPosition.TOP_RIGHT}};
  var map = new google.maps.Map(mapCanvas, mapOptions);
  var i;
  var previousMarker;
  // -------------------------------
  //show locations on the map
  // -------------------------------
  for (i = 0; i < fotoCount; i++)  { 
    var myLatLng=new google.maps.LatLng(Latituden[i], Longituden[i]); 
    var marker = new StyledMarker({styleIcon:new StyledIcon(StyledIconTypes.MARKER,{color:'00ff00',text:Letters[i]}),position:myLatLng,map:map});
    marker.set('zIndex', -i);
    marker.myIndex = i;

    google.maps.event.addListener(marker, 'click', function() {
      var insertion = "";
      insertion='<img src=\"http://www.pdavis.nl/Ams/'.concat(Bestanden[this.myIndex],'.jpg\"></img>'); 
      insertion=insertion.concat('<table class=width100><tr><td>Bestand: ',Bestanden[this.myIndex],'</td><td class=pright>Lokatie: ',Latituden[this.myIndex],' °N., ',Longituden[this.myIndex],' °E. (',Letters[this.myIndex],')</td>');
      insertion=insertion.concat('<td class=pright>Genomen: ',Datums[this.myIndex],'</td></tr><td colspan=3>Object: ',Objecten[this.myIndex],'</td></table>');
      $('#photo').html(insertion);
      this.styleIcon.set('color', 'ff0000');
      if(previousMarker!=null){previousMarker.styleIcon.set('color', '00ff00')};
      previousMarker=this;
      });
  }  
}