Google Map API V3-2張地圖上的infowindows @標記

Question

我正在研究Google Map API V3代碼，我是JS的初學者，有些困惑。

這是我想做的事情：我有一個包含緯度/經度，地址，圖片，描述等的數據庫。

在我的最后一頁上，我有兩張地圖，一張是法國的，一張是巴黎的。 如果緯度/經度在巴黎，則標記在巴黎的地圖上；如果在巴黎以外，則在法國地圖上。

到目前為止，我已經完全完成了我想要的操作，但是我被困在infoWindow中：（我可以打開它們，但是不能自動關閉它們...我只想同時打開一個信息窗口。

這是我的代碼（只是JS部分）：

（“ mapidf”用於巴黎，“ mapfr”用於法國，並且我刪除了無效的信息窗口的嘗試）

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



function initialize(ListeDesPoints) {
    var mapidfOptions = {
          center: { lat: 48.856614, lng: 2.352222},
          zoom: 11
        };
    var mapfrOptions = {
          center: { lat: 46.227638, lng: 2.213749},
          zoom: 5
        };

     var mapidf = new google.maps.Map(document.getElementById('maps-idf'),
            mapidfOptions);

     var mapfr = new google.maps.Map(document.getElementById('maps-fr'),
            mapfrOptions);


    var infowindow = new Array();
    var marker = new Array();

    for (var i = 0; i < ListeDesPoints.length; i++)
        {

                marker[i] = new google.maps.Marker({
                                        position: new google.maps.LatLng (ListeDesPoints[i]['lat'], ListeDesPoints[i]['lng']),
                                        title: ListeDesPoints[i]['address']
                                 });
                var max_lat = 48.9602260;
                var min_lat = 48.7451930;
                var max_lng = 2.6327379;
                var min_lng = 2.0946256;
                        if(ListeDesPoints[i]['lat'] > max_lat || ListeDesPoints[i]['lat'] < min_lat || ListeDesPoints[i]['lng'] > max_lng || ListeDesPoints[i]['lng'] < min_lng)
                            {
                                var map = mapfr;
                            }
                        else
                            {
                                var map = mapidf;
                            }
                infowindow[i] = new google.maps.InfoWindow({content:""})
                var description = '<h2>'+ ListeDesPoints[i]['address']+'</h2><img src="'+ListeDesPoints[i]['image']+'" />';


                CreateMarker(marker[i], map, infowindow[i], description);
        }


}

您可能會注意到我做錯的其他事情...請隨意批評這段代碼:)

非常感謝你

Answer 1

可能最簡單的方法是創建一個信息窗口實例，並將其重新用於所有標記，如下所示：

var infowindow = new google.maps.InfoWindow({});
var marker = new Array();

for (var i = 0; i < data.length; i++) {

      marker[i] = new google.maps.Marker({
           position: new google.maps.LatLng(data[i]['lat'], data[i]['lng']),
           title: data[i]['address'],
           map: map
      });

      google.maps.event.addListener(marker, 'click', function () {
          infowindow.setContent('Some content goes here');
          infowindow.open(map);
      });

}

根據信息窗口 ：

最佳做法：為了獲得最佳的用戶體驗，任何時候都只能在地圖上打開一個信息窗口。 多個信息窗口使地圖顯得混亂。 如果一次只需要一個信息窗口，則可以只創建一個InfoWindow對象，並在地圖事件（例如用戶單擊）時在其他位置或標記處打開它。 如果確實需要多個信息窗口，則可以同時顯示多個InfoWindow對象。

在這種情況下，當您單擊新標記時，信息窗口應自動關閉，而無需調用close() method 。

JSFiddle： 修改示例

Answer 2

如果您希望每個地圖有一個標記，請為每個地圖創建一個單獨的InfoWindow，然后像標記地圖一樣將其與標記關聯。

for (var i = 0; i < ListeDesPoints.length; i++) {

    marker[i] = new google.maps.Marker({
        position: new google.maps.LatLng(ListeDesPoints[i]['lat'], ListeDesPoints[i]['lng']),
        title: ListeDesPoints[i]['address']
    });
    var max_lat = 48.9602260;
    var min_lat = 48.7451930;
    var max_lng = 2.6327379;
    var min_lng = 2.0946256;
    if (ListeDesPoints[i]['lat'] > max_lat || ListeDesPoints[i]['lat'] < min_lat || ListeDesPoints[i]['lng'] > max_lng || ListeDesPoints[i]['lng'] < min_lng) {
        var map = mapfr;
        var infowindow = infowindowfr;
    } else {
        var map = mapidf;
        var infowindow = infowindowidf;
    }
    //infowindow[i] = new google.maps.InfoWindow({ content: "" });
    var description = '<h2>' + ListeDesPoints[i]['address'] + '</h2><img src="' + ListeDesPoints[i]['image'] + '" />';


    CreateMarker(marker[i], map, infowindow, description);
}

概念證明

代碼段：

 function CreateMarker(marker, map, infowindow, description) { marker.setMap(map); google.maps.event.addListener(marker, 'click', function() { infowindow.setContent(description); infowindow.open(map, this); }); } function initialize(ListeDesPoints) { var mapidfOptions = { center: { lat: 48.856614, lng: 2.352222 }, zoom: 11 }; var mapfrOptions = { center: { lat: 46.227638, lng: 2.213749 }, zoom: 5 }; var mapidf = new google.maps.Map(document.getElementById('maps-idf'), mapidfOptions); var mapfr = new google.maps.Map(document.getElementById('maps-fr'), mapfrOptions); //var infowindow = new Array(); var infowindowfr = new google.maps.InfoWindow({}); var infowindowidf = new google.maps.InfoWindow({}); var marker = new Array(); for (var i = 0; i < ListeDesPoints.length; i++) { marker[i] = new google.maps.Marker({ position: new google.maps.LatLng(ListeDesPoints[i]['lat'], ListeDesPoints[i]['lng']), title: ListeDesPoints[i]['address'] }); var max_lat = 48.9602260; var min_lat = 48.7451930; var max_lng = 2.6327379; var min_lng = 2.0946256; if (ListeDesPoints[i]['lat'] > max_lat || ListeDesPoints[i]['lat'] < min_lat || ListeDesPoints[i]['lng'] > max_lng || ListeDesPoints[i]['lng'] < min_lng) { var map = mapfr; var infowindow = infowindowfr; } else { var map = mapidf; var infowindow = infowindowidf; } //infowindow[i] = new google.maps.InfoWindow({ content: "" }); var description = '<h2>' + ListeDesPoints[i]['address'] + '</h2><img src="' + ListeDesPoints[i]['image'] + '" />'; CreateMarker(marker[i], map, infowindow, description); } } //Usage google.maps.event.addDomListener(window, 'load', function() { //1.load data var points = [{ 'lat': 48.856614, 'lng': 2.352222, 'address': 'Paris', 'image':'data:image/jpeg;base64,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' }, { 'lat': 48.85837, 'lng': 2.294481, 'address': 'Eiffel Tower', 'image': 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBwgHBgkIBwgKCgkLDRYPDQwMDRsUFRAWIB0iIiAdHx8kKDQsJCYxJx8fLT0tMTU3Ojo6Iys/RD84QzQ5OjcBCgoKDQwNGg8PGjclHyU3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3N//AABEIAEgASAMBIgACEQEDEQH/xAAaAAACAwEBAAAAAAAAAAAAAAAABAECAwUH/8QALhAAAgICAQEFBQkAAAAAAAAAAAECEQMSIUETMVFhcQQiscHhBSMkMkKBkaHR/8QAGQEAAwEBAQAAAAAAAAAAAAAAAAEDBAIF/8QAHxEBAQEAAgEFAQAAAAAAAAAAAAERAwRxAhIhMUET/9oADAMBAAIRAxEAPwDz5E0CJPQY1JKyuhrRFDwM9Q1GJQivZsc1e7nJP0SjXxZnQYGTQUaURQ8DOiS9ECwNESFFkh4SoUXoKHhWmtcc/s5uKpw57uraXfYjR05rJH7Pp7auKfWmvcfzEKI8G5fKvL8WKURRpQUWR1k0BeiQPWmgajnZFXjOsc+4rqFMY0IcPIMGt8sfws4pLhcd3TX/AB/35iOp0XvJZFLXh5FXkkvp/HqKKBm612Xyvz/c8MlEnU2UCdDTiBZxAYcAED7xlHjHNCrgUTJaMmGLacY13tIZeMthhWWLq0nbV13c/I59VyWn6fm4FCM8ey/XkyxXu88pfX058BDQ6eC+zxWnxKL5fi306cJen7iksesmvDgydS/cauz+VjGBOpqoFtTYyl3ADdwIEeuq8RV4gAabOWMV9qzdj93GOTtJwlrKMFJJcJ3bXRkgR7Fs47YtwTeSaUx58sZuLx5eYJOoK+K5/N15v1Xhy4pR9olOcYzi9vejONNN8/BoAMnU9V/pjX2ZPYusZGgAeiwIcCAAA//Z' }, { 'lat': 46.227638, 'lng': 2.213749, 'address': 'France', 'image':'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOMAAACXCAMAAADQ4xypAAAAFVBMVEX///8AI5XtKTl0e7fzfYTtESgAAJCDlMQAAAAAp0lEQVR4nO3PNwEAMAADoHT6l1wTOXqAAzJq7krPPrMmjo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Onx0fofSNkUYueUMAAAAASUVORK5CYII=' }, { 'lat': 44.837789, 'lng': -0.57918, 'address': 'Bordeaux', 'image':'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBwgHBgkIBwgKCgkLDRYPDQwMDRsUFRAWIB0iIiAdHx8kKDQsJCYxJx8fLT0tMTU3Ojo6Iys/RD84QzQ5OjcBCgoKDQwNGg8PGjclHyU3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3N//AABEIAEgASAMBIgACEQEDEQH/xAAbAAABBQEBAAAAAAAAAAAAAAAEAAIDBQYBB//EADYQAAIBAwIEBAQEBAcAAAAAAAECAwAEERIhBRMxQSJRYYEycZGhscHR8AZC4fEUFVJicrLC/8QAGgEAAwEBAQEAAAAAAAAAAAAAAQIDAAQFBv/EACIRAAICAQQCAwEAAAAAAAAAAAABAhEDBBMxQSHwFDJCEv/aAAwDAQACEQMRAD8A0AfyrodvOhA5HenrIcda9WjiCw3rXQc9KGD4p6yECgYIBp4ahxIcU7WKBibXjoKWo1BzK6JPWsEIGcZNKoDJt1rlajAGtD1FcBQdCayvC+KzxyyJex3BGBpJ8QB8qPn4zpwLa2lnJXVnZQPrS7sKtsfanfhF8JAMU7mZ9Ky0nE+MHTyrKJSTg6jk6s9OvWmpd/xBMpaMRKucZUZ/I0j1OFfoZafK/wAms5mxyQAOpNB3fGLW1OjVzX/0x749+lZiWPjd2Ghnn1DOCnLJBx6YGarrmG4tZOW0SHG4AUoB36E0I6nE3SYZafJFW0bNf4gsi6q/MjVh8bp4fcjOPfarASh1DIwKkZBByCK88iuZQfHH9MHy8h6CiLG+kspNcNzLCCRqikU6Dj6+/Sm3ooXab4N3rpUBY3qXtuJYyp7HQ2oZpVZNNWibTTpmbh4xpZmUnOd8yKSPkcZHT7E+dTDjd1FGoUltgnxJ6dvYfjUfDpkiZudpPjQdfPA/9VYw3NsI0bCnSA225HhKflXzuaTi/EbPdxR/qP2oD/zS73YNKNWGyCvbofn601eL3EUaqon08zmOCB19KJlhtJFMelFyI4CMY2BBx7122gtw5dCgDvpbf+Tuv9Km86S8w98FFhb4kVzcVmgZtH+IyX1rlVOG/sKYOLzXkzSSJcs6+HPLUD5faj2swLKN0Lc6OYGIA58OkZz9zQd5aRLdMlshKHmHv1G610YsqlwvbIZcbXL9oWt3GDHLvt4tI9P360tIGW0oAd8ll+f5/SpxZHQ2FRSdxnsSuf8AtvRQtAzMARjP8q7DxH+3tRlnrsMdOn0V2hdWpSFI3yp3/GlV0lmgSR9sKdyzY/ftSofIfQfjxM5Kl3bPq0pKNYc6TpJw2r9PYDFQC9bSIp42iOlE1SLsN8lvbsKs41O4Rz/wcV1ShPLmTQTtjtXVKEWcsZNcAcF6JLmJo2xzLpmxn4VABJPYZwaYtwXgs3DgK96ShZeoGAQPfNTz8KttJkRNIUE5jOM4+1QW9nKxintpSrRMGjMi7qcBgR9am8K6Kbsux99csnDr14mAMcgIwdwxbY/hRqSoJlHLkeR1l0j4Q3h6Z86rmgntLS5V1URy7ySDBOwPc/Oo0u4UjXR4+4/ZoPC2qCs1M1xkEduxTlodIxpXLfCB36b0PPxq2t2KXdyquh8KSnUy9+n76Cs7PxK6ubc2/OeFGGC0J0tj51TtwYLJzHuDIh3Kuu7H1IO9Sjpkh56hvg0V5xC/vm18OS2mt025kkytvjyBOD7Gu1X2rR20HLjUAd2G2d6VdCxUR3L7Lh0YMApHMBYDPXKtj75H386kmjS5iWRVGdOpPM57UqVMZoEN7bInLMuskbKoySP16fWgG4zKU028SRY21Yyf0pUqokiLbAJpZJm1Suzn/cc1CGrtKnFFG7q2etEyzkxjJ7UqVLQUwUzHt0pUqVOKf//Z'}]; initialize(points); }); 

 #maps-fr, #maps-idf { height: 240px; width: 640px; margin: 0px; padding: 0px; } 

 <script src="https://maps.googleapis.com/maps/api/js"></script> <div id="maps-fr"></div> <div id="maps-idf"></div>