谷歌地图点击事件不完全正确

google maps click event not working completely correct

本文关键字：完全正确 事件 谷歌地图      更新时间：2023-09-26

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

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） 在右侧面板中显示带有信息的相应照片。第一个确实有效，但第二个始终显示与最后一个标记相对应的照片。用"警报（插入）;" 显示这对每个标记都是正确的。

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

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

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

插入应该是一个数组。这样，当您迭代时，在 eacj 迭代中，您只是覆盖插入的内容。最后，您将图像数组中的最后一个值作为插入。

var insertionArr = [];
...
insertion=insertion.concat('<td class=pright>Genomen: ',Datums[i],'</td></tr><td colspan=3>Object: ',Objecten[i],'</td></table>');
insertionArr[marker] = insertion; // Add it to the array
google.maps.event.addListener(marker, 'click', function() {
  $('#photo').html(insertionArr[this]);// get it from the array
  ...
});

这不是经过测试的代码。

相关文章：