谷歌地图点击事件无法正常工作

debugcn 发表于 Dev

彼得·贝雷斯福德

我使用以下脚本来生成此页面

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）在右侧面板中显示带有信息的适当照片。前一个确实有效，但第二个总是显示与最后一个标记相对应的照片。使用“ alert（insertion）;” 表明这对于每个标记都是正确的。

Payou

您无法以这种方式进行操作，因为在循环结束时，“ i”将始终是最后一个索引。当然，当您单击标记时，回调中的“ i”值是最后一个索引，因此您应该始终显示最后一张图片。

由于i值的原因，仅将插入代码放入click回调中是不够的。您没有绑定任何东西来固定回调中的值，因此您将遇到相同的问题。

以下解决方案使用标记对象来绑定“ 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;
      });
  }  
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。