[英]Google map marker click function issue
我正在與Google建立互動式地圖。 我將有很多地圖標記,當單擊它們時,它們將打開一個包含與該位置有關的內容的引導程序模態。 是否可以在腳本中僅進行1個模態調用,然后將其相對於單擊的標記的內容加載? 我當時想我可以寫一個包含所有不同模式內容的遠程html文件。 但是現在,我必須為每個標記(痛苦)編寫一個click函數,以打開唯一的模態。
相對於單擊的標記有1個模態,1個單擊功能,根據單擊的標記會加載唯一的模態內容。 能做到嗎?
function initialize() {
var map;
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(43.819201,-79.535474),
disableUi: true
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var commerciallocations = [
['Regan',43.703264,-79.804144],
['Lake',43.897239,-78.6594789],
['Rowe',43.72277,-80.378554],
['Westport',43.649826,-79.6599653],
['Vinefresh',42.9556009,-81.6699305]
];
var marker2, i;
for (i = 0; i < commerciallocations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(commerciallocations[i][1], commerciallocations[i][2]),
map: map,
icon:'images/commercialmapicon.png'
});
if (i == [0]){
google.maps.event.addListener(marker, 'click', function() {
$('#modal0').modal();
});
}
if (i == [1]){
google.maps.event.addListener(marker, 'click', function() {
$('#modal1').modal();
});
}
if (i == [2]){
google.maps.event.addListener(marker, 'click', function() {
$('#modal2').modal();
});
}
if (i == [3]){
google.maps.event.addListener(marker, 'click', function() {
$('#modal3').modal();
});
}
if (i == [4]){
google.maps.event.addListener(marker, 'click', function() {
$('#modal4').modal();
});
}
};
我添加了我必須編寫的腳本部分,以告訴每個標記打開其各自的模式。 了解如何為數組的每個索引編寫click事件。 我什么都不知道
嘗試將標記放入數組中,然后在addListerner函數中傳遞數組項和索引,以生成對模式的順序調用,例如:
var arrayForModal = [];
for (i = 0; i < commerciallocations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(commerciallocations[i][1], commerciallocations[i][2]),
map: map,
icon:'images/commercialmapicon.png'
k = arrayForModal.push(marker);
addListenersOnPolygon(arrayForModal[k-1], 'click', function(k) { $(('#modal' + (k-1)).modal)});
});
感謝您的幫助。 它無疑幫助了我的思路,我解構了在SO上發現的其他一些功能,並設法正確編寫了click函數。
我將每個模態的ID添加到數組中每個位置的索引中(將ID附加到標記上)。 然后,我創建了一個變量來標識索引值。 然后,我簡單地使用ID值調用索引,該ID值取決於在for循環中單擊了哪個標記。
var commerciallocations = [
['Regan',43.703264,-79.804144,'#modal0'],
['Lake',43.897239,-78.6594789, '#modal1'],
['Rowe',43.72277,-80.378554, '#modal2'],
['Westport',43.649826,-79.6599653, '#modal3'],
['Vinefresh',42.9556009,-81.6699305, '#modal4'],
['Winery', 42.1209449,-82.9707676, '#modal5']
];
var markers =[];
for (var i = 0; i < commerciallocations.length; i++) {
var place = commerciallocations[i];
var marker = new google.maps.Marker({
position: new google.maps.LatLng(commerciallocations[i][1], commerciallocations[i][2]),
map: map,
icon:'images/commercialmapicon.png',
title: place[0],
popup: place[3]
});
markers.push(marker);
google.maps.event.addListener(marker, 'click', function() {
$(this.popup).modal();
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.