使Google地图标记数组全局中断标记点击事件

时间:2015-06-14 13:04:59

标签: javascript jquery google-maps

在此page中,我使用以下脚本:

do {
      try fileString.writeToURL(fileURL, atomically: true, encoding: NSUTF8StringEncoding)
} catch let error as NSError {
      fatalError("Error writing to file - \(error)")
} catch {

}

单击标记会突出显示所选标记(变为红色)并显示相关照片。 Vorige和Volgende两个按钮(上一个和下一个,选择上一张或下一张照片)显然不起作用,因为数组标记[]是函数initialize()的本地:

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 markers=[]; //<=========================================== inside function initialize()
  var i;
  var insertion;
  var previousMarker;
  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;
    markers.push(marker);
    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);
      if(previousMarker!=null){previousMarker.styleIcon.set('color', '00ff00')};
      this.styleIcon.set('color', 'ff0000');
      thisMarker=this.myIndex;
      previousMarker=this;
      });
    }  
  google.maps.event.trigger(markers[0], 'click');
}
  google.maps.event.addDomListener(window, 'load', initialize);

明显的解决方法是移动&#34; var markers = []&#34;外部函数initialize()(this页面)使这个数组成为全局,但现在按钮突出显示(按钮&#34; A&#34;启动时为红色;单击按钮变为红色)不起作用。我在这里做错了什么?

1 个答案:

答案 0 :(得分:1)

唯一奇怪的是,当你将索引0传递给最大值时,click事件会因为他发送一个负值而爆炸,然后改变它并想知道它是否为-1,如果true传递更大的索引 - 1 (例外:无法读取未定义的属性'__e3ae_')

function Previous() {
thisMarker--;
if (thisMarker==-1) {thisMarker=fotoCount-1};
// following line not working
google.maps.event.trigger(markers[thisMarker], 'click');
}

Fiddle example

抱歉我的英文