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

Answer 1

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

由于i值，将插入代码放在点击回调中是不够的。你没有绑定任何东西来修复回调中的值，所以你会遇到同样的问题。

以下解决方案使用标记对象绑定＆＃34; i＆＃34;值，你可以在你的回调中使用它。

在您的页面上测试脚本：）。

根据需要调整它！

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;
      });
  }  
}

Answer 2

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

<div id="NameItem4CheckBox" class="ng_checkbox" ng-class="{'ng-checkbox-hover': liHover}" ng-tool-tip="" ng-click="onClick()">
        <span ng-class="{'selectedCB': isChecked(c[ngOptionId], c[ngOptionName])}" class="selectedCB"></span>
    </div>

这不是经过测试的代码。

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

2 个答案: