使谷歌地圖標誌器陣列的全球符標記點擊事件

-1

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

點擊標記高亮顯示所選標記（變成紅色），並顯示相應的照片。兩個按鈕Vorige和Volgende（上一頁和下一頁，選擇一張或下一張照片），顯然不工作，因爲數組標記[]是本地的功能初始化（）：

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

最明顯的解決方法是把「var markers = []」外部函數initialize（）（this頁面）使此數組成爲全局的，但現在突出顯示的按鈕（按鈕「A」在開始時紅色;單擊的按鈕變爲紅色）不起作用。我在這裏做錯了什麼？

來源

2015-06-14 Peter Beresford

[谷歌地圖JS API V3 - 簡單多個標記的例子]可能重複（HTTP： //stackoverflow.com/questions/3059044/google-ma PS-JS-API-V3-簡單多標記的例子）;使用函數閉包將標記與點擊監聽器相關聯。 – geocodezip

唯一不可思議的是，當您將索引0傳遞給最大值時，點擊事件會因爲發送負值而爆炸，那麼更改該值並想知道它是否爲-1，如果true通過更大的索引 - 1（Excepcion：無法讀取的未定義的屬性 '__e3ae_'）

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

Fiddle example

對不起我的英語

來源

2015-06-14 16:04:29 Alimentador

你好Alimentador：謝謝（我正在看錯方向！） –

使谷歌地圖標誌器陣列的全球符標記點擊事件

回答

相關問題