帶有infowindow的多個標記

我們對infowindow使用多個標記。一切工作正常。問題是當我們點擊標記時，infowindow打開，但點擊其他標記時它不關閉。它保持打開。所以可以爲這個問題提供解決方案。帶有infowindow的多個標記

var berlin = new google.maps.LatLng(52.520816, 13.410186); 
    var neighborhoods = [ 
    new google.maps.LatLng(52.511467, 13.447179), 
    new google.maps.LatLng(52.549061, 13.422975), 
    new google.maps.LatLng(52.497622, 13.396110), 
    new google.maps.LatLng(52.517683, 13.394393) 
    ]; 

    var markers = []; 
    var iterator = 0; 

    var map; 

    function initialize() { 
    var mapOptions = { 
     zoom: 12, 
     mapTypeId: google.maps.MapTypeId.ROADMAP, 
     center: berlin 
    }; 

    map = new google.maps.Map(document.getElementById("map_canvas"), 
      mapOptions); 
    } 

    function drop() { 
    for (var i = 0; i < neighborhoods.length; i++) { 
     setTimeout(function() { 
     addMarker(); 
     }, i * 200); 
    } 
    } 

    function addMarker() { 
    var marker = new google.maps.Marker({ 
     position: neighborhoods[iterator], 
     map: map, 
     draggable: false 
    }); 
    markers.push(marker); 

    var contentString = $("#pop"+iterator).html(); 

    var infowindow = new google.maps.InfoWindow({ 
     content: contentString, 
     maxWidth: 300, 
     maxHeight: 500 
    }); 


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

    iterator++; 
    }

來源

2012-04-13 Ramesh Thenappan

您正在創建儘可能多的infowindow s，因爲有標記。在你的情況下，我認爲一個infowindow就足夠了。因此，對於只有一個infowindow工作，你可以在全球範圍內實現這一點：

//Using lazy initialization. 
//InfoWindow will be created only after the first call 
var getInfoWindow = (function(){ 
    var _instance = null; 
    return function(){ 
     if(_instance == null){ 
      _instance = new google.maps.InfoWindow({ 
          maxWidth: 300, 
          maxHeight: 500 
         }); 
     } 
     return _instance; 
    }; 
})();

還需要將contentString存儲必須在click事件顯示每個標記。所以addMarker方法的最後修改將是這樣的：

function addMarker() { 
var marker = new google.maps.Marker({ 
    position: neighborhoods[iterator], 
    map: map, 
    draggable: false 
}); 
markers.push(marker); 
//Storing content html 
marker.contentString = $("#pop"+iterator).html(); 

google.maps.event.addListener(marker, 'click', function() { 
    //Setting content of InfoWindow 
    getInfoWindow().setContent(marker.contentString); 
    //Opening 
    getInfoWindow().open(map,marker); 
}); 

iterator++; 
}

來源

2012-04-13 15:44:09 Engineer

大...感謝您的幫助 – 2012-04-16 06:21:20

通過只使用一個信息窗口，並重新使用它，可以防止其信息窗口各地的混亂如果用戶在點擊其他標記之前未正確地將它們放在X位置，則放置該位置 – dsdsdsdsd 2012-08-27 10:50:16

謝謝你的回答，它爲我解決了一個問題。但是我有一個關於你的代碼的問題：在第二次調用中，變量「_instance」如何成爲InfoWindow而不是null？ – Lamar 2017-05-07 14:12:35

把VAR信息窗口的addMarker功能之外。就像這樣：

var infowindow = new google.maps.InfoWindow();

然後你addMarker函數中使用

infowindow.setContent(contentString);

這樣的信息窗口只創建一次。點擊不同的標記就會移動窗口並設置內容。

來源

2012-04-13 14:11:23 zemirco

帶有infowindow的多個標記

回答

相關問題