信息泡沫總是顯示了在最後一個標記

Question

可能重複：
Google Maps - Multiple markers - 1 InfoWindow problem

我正在做一個map，我繪製一些城鎮和地區。你會看到，當你點擊一個標記時，你會被重定向到相應的頁面。但現在我想將鏈接和其他信息放入信息泡泡彈出窗口中。所以，我編輯我的代碼如下：

function setMarkers(map, locations) { 
    for (var i = 0; i < locations.length; i++) { 
    var beach = locations[i]; 
    var myLatLng = new google.maps.LatLng(beach[1], beach[2]); 
    var infobulle = new google.maps.InfoWindow({content: beach[4], position: myLatLng}); 
    var marker = new google.maps.Marker({position: myLatLng, map: map, title: beach[0], zIndex: beach[3], clickable: true, icon: beach[5],}); 
    marker[i] = marker; 
    google.maps.event.addListener(marker[i], 'click', function() { 
     infobulle.open(map, marker); 
    }); 
    } 
} 

但你可以see here的信息泡沫停留在最後一個位置「封殺」。我真的不知道如何排序。

我有這個相同的結果：

function setMarkers(map, locations) { 
    for (var i = 0; i < locations.length; i++) { 
    var beach = locations[i]; 
    var myLatLng = new google.maps.LatLng(beach[1], beach[2]); 
    var infobulle = new google.maps.InfoWindow({content: beach[4]}); 
    var marker = new google.maps.Marker({position: myLatLng, map: map, title: beach[0], zIndex: beach[3], clickable: true, icon: beach[5]}); 

    google.maps.event.addListener(marker, 'click', function() { 
    infobulle.open(map, marker); 
    }); 
} 

最新版本：

function setMarkers(map, locations) { 
    for (var i = 0; i < locations.length; i++) { 
    processBeach(locations[i]); 
    } 
} 
function processBeach(beach) { 
    var myLatLng = new google.maps.LatLng(beach[1], beach[2]); 
    var infobulle = new google.maps.InfoWindow({content: beach[4]}); 
    var marker = new google.maps.Marker({position: myLatLng, map: map, title: beach[0], zIndex: beach[3], clickable: true, icon: beach[5]}); 
    google.maps.event.addListener(marker, 'click', function() { 
infobulle.open(map, marker); 
    }); 
} 

Answer 1

看一看我的jSFiddle here。你缺少的代碼是

1. 點擊你需要從地圖讀取當前的信息窗口，然後如果你要經常打開窗戶用新信息
2. 更新和關閉，當人們想關閉，那麼你必須設置一個切換類型的變量，這樣每個窗口將在點擊時創建，然後當有人點擊關閉時它將消失。但我認爲你只需要完成第一部分。

你應該看看我的小提琴的代碼是從線120至150，並檢查信息窗口，如果它存在，然後就打開新的標記相同的窗口，以便從舊移動遊標並轉到新的。如果你不斷創建新的窗口，那麼舊的窗口不會神奇地關閉。

var map = $(this).gmap3("get"), 
     infowindow = $(this).gmap3({get:{name:"infowindow"}}); // Get current info window 
    if (infowindow){ // if infoWindow is there then use it else create new 
     infowindow.open(map, marker); 
     infowindow.setContent(context.data.ht); 
     jQuery("#customPopup").html(context.data.ht); 
     jQuery("#customPopup").show(500); 
    } else { 
     $(this).gmap3({ 
     infowindow:{ 
      anchor:marker, 
      options:{content: context.data.ht} 

     } 
     }); 
     jQuery("#customPopup").html(context.data.ht); 
     jQuery("#customPopup").show(500); 
    } 

Answer 2

您正在使用變量似乎兩個不同的目的。一個是單個標記，另一個是標記數組。但是如果你使用閉包，你不需要一組標記。試試這個：

function setMarkers(map, locations) { 
    for (var i = 0; i < locations.length; i++) { 
    (function(beach) { 
     var myLatLng = new google.maps.LatLng(beach[1], beach[2]); 
     var infobulle = new google.maps.InfoWindow({content: beach[4], position: myLatLng}); 
     var marker = new google.maps.Marker({position: myLatLng, map: map, title: beach[0], zIndex: beach[3], clickable: true, icon: beach[5]})) 
     google.maps.event.addListener(marker, 'click', function() { 
     infobulle.open(map, marker); 
     }); 
    }(locations[i])); 
    } 
} 

順便說一句，你還必須在選項數組的最後一個虛假逗號爲google.maps.Marker，這將導致在某些瀏覽器的問題。

編輯

如果你不想使用閉包，這相當於：

function processBeach(beach) { 
    var myLatLng = new google.maps.LatLng(beach[1], beach[2]); 
    var infobulle = new google.maps.InfoWindow({content: beach[4], position: myLatLng}); 
    var marker = new google.maps.Marker({position: myLatLng, map: map, title: beach[0], zIndex: beach[3], clickable: true, icon: beach[5]})) 
    google.maps.event.addListener(marker, 'click', function() { 
    infobulle.open(map, marker); 
    }); 
} 

function setMarkers(map, locations) { 
    for (var i = 0; i < locations.length; i++) { 
    processBeach(locations[i]); 
    } 
}