Google Maps API多個標記與Infowindows - 單擊事件衝突

-1

我試圖讓一個具有多個標記的地圖與每個infowindow。到目前爲止沒有什麼特別的。Google Maps API多個標記與Infowindows - 單擊事件衝突

所有infowindows都應該打開onload。沒問題。

如果我對自己的標記

點擊

在其信息窗口的X每一個信息窗口應該關閉。

後者也沒有問題。

但是，如果我點擊標記，它的行爲不應該如此。

頁面已加載。 infowindows是開放的。現在我單擊Marker 1，它關閉Marker 2的infowindow。如果再次單擊Marker 1，則第二個信號窗將在Marker 1上打開。標記1上的「initial」infowindow只能用infowindow中的X關閉。

如果我通過X關閉所有infowindows，那麼我可以通過它們的標記打開和關閉每個infowindow。但是：打開的infowindows將被點擊關閉另一個標記，這不是我想要的。只需點擊自己的標記就可以打開和關閉infowindow。

這裏是我的代碼：

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
 
    <meta charset="utf-8"> 
 
    <title>Circles</title> 
 
    <style> 
 
     html, body { 
 
     height: 100%; \t \t 
 
     margin: 0px; 
 
     padding: 0px 
 
     } 
 
\t #map-canvas { 
 
     height: 500px; 
 
\t \t width:800px; 
 
     margin: 0px; 
 
     padding: 0px 
 
     } 
 
    </style> 
 
    <script> 
 
\t function initialize() { 
 
\t  var infos = []; 
 
\t \t var locations = [ 
 
\t \t \t ['Marker 1', 54.08655, 13.39234, 2], 
 
\t \t \t ['Marker 2', 53.56783, 13.27793, 1]  
 
\t \t ]; 
 
\t \t 
 
\t \t var map = new google.maps.Map(document.getElementById('map-canvas'), { 
 
\t \t \t mapTypeId: google.maps.MapTypeId.ROADMAP, 
 
\t \t \t zoomControl: true, 
 
\t \t \t zoomControlOptions: { 
 
\t \t \t \t style: google.maps.ZoomControlStyle.SMALL 
 
\t \t \t } 
 

 
\t \t }); 
 
\t \t 
 
\t \t var bounds = new google.maps.LatLngBounds(); 
 

 
\t \t for (i = 0; i < locations.length; i++) { 
 
\t \t \t var marker = new google.maps.Marker({ 
 
\t \t \t \t position: new google.maps.LatLng(locations[i][1], locations[i][2]), 
 
\t \t \t \t map: map, 
 
\t \t \t \t content: locations[i][0] 
 
\t \t \t }); 
 

 
\t \t \t bounds.extend(marker.position); \t 
 
\t \t \t 
 
\t \t \t var openedInfoWindow = null; 
 
\t \t \t 
 
\t \t \t var infowindow = new google.maps.InfoWindow();    \t \t 
 

 
\t \t \t google.maps.event.addListener(marker, 'click', (function() { 
 
\t \t \t  console.log('Klick! Marker='+this.content); 
 
\t \t \t  if(openedInfoWindow != null){ \t      \t \t 
 
\t \t \t \t  openedInfoWindow.close(); 
 
\t \t \t \t \t openedInfoWindow = null; 
 
\t \t \t \t }else{ \t \t \t \t 
 
\t \t \t \t infowindow.setContent(this.content); \t 
 
\t \t \t \t infowindow.open(map, this); 
 
\t \t \t \t openedInfoWindow = infowindow; 
 
\t \t \t \t google.maps.event.addListener(infowindow, 'closeclick', function() { 
 
\t \t \t \t \t openedInfoWindow = null; \t \t \t \t \t 
 
\t \t \t \t }); 
 
\t \t \t \t } \t 
 

 
\t \t \t })); 
 
\t \t 
 
\t \t \t 
 
\t \t \t 
 
\t \t \t 
 
\t \t \t google.maps.event.trigger(marker, 'click'); 
 
\t \t } 
 

 
\t \t map.fitBounds(bounds); 
 

 
\t \t var listener = google.maps.event.addListener(map, "idle", function() { 
 
\t \t \t map.setZoom(8); 
 
\t \t \t google.maps.event.removeListener(listener); 
 
\t \t }); 
 
\t } 
 
\t function loadScript() { 
 
\t \t var script = document.createElement('script'); 
 
\t \t script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&' + 'callback=initialize'; 
 
\t \t document.body.appendChild(script); 
 
\t } 
 

 
\t window.onload = loadScript; 
 
    </script> 
 
    </head> 
 
    <body> 
 
    <div id="map-canvas"></div> 
 
    </body> 
 
</html>

這裏是一個link to the jsfiddle

看來，單擊事件是相互矛盾的，但在那一刻，我不知道該怎麼改變這一點。任何想法？謝謝。

This post沒有解決我的問題（請糾正我，如果我錯了）。其中的infowindows的行爲如下：如果您通過點擊其標記打開一個新的infowindow，則已打開的另一個標記的infowindow將被關閉。這不是我想要的。 只需點擊自己的標記就可以關閉一個infowindow，而不是點擊另一個標記。

來源

2015-03-02 Sven

post to which you link確實包含解決方案：「函數閉包」。您只需將其擴展爲包含每個標記的infowindow，因爲您對每個標記都有一個唯一的infowindow，而不是所有標記之間共享的全局infowindow。

for (i = 0; i < locations.length; i++) { 
    var marker = new google.maps.Marker({ 
     position: new google.maps.LatLng(locations[i][1], locations[i][2]), 
     map: map, 
     content: locations[i][0] 
    }); 
    var infowindow = new google.maps.InfoWindow(); 
    google.maps.event.addListener(marker, 'click', (function (marker, i, infowindow) { 
     return function() { 
      console.log('Klick! Marker=' + this.content); 
      infowindow.setContent(this.content); 
      infowindow.open(map, this); 
     }; 
    })(marker, i, infowindow)); 
    bounds.extend(marker.position); 

    google.maps.event.trigger(marker, 'click'); 
}

working fiddle

代碼片段：

function initialize() { 
 
    var infos = []; 
 
    var locations = [ 
 
    ['Marker 1', 54.08655, 13.39234, 2], 
 
    ['Marker 2', 53.56783, 13.27793, 1] 
 
    ]; 
 

 
    var map = new google.maps.Map(document.getElementById('map-canvas'), { 
 
    mapTypeId: google.maps.MapTypeId.ROADMAP, 
 
    zoomControl: true, 
 
    zoomControlOptions: { 
 
     style: google.maps.ZoomControlStyle.SMALL 
 
    } 
 

 
    }); 
 

 
    var bounds = new google.maps.LatLngBounds(); 
 

 
    for (i = 0; i < locations.length; i++) { 
 
    var marker = new google.maps.Marker({ 
 
     position: new google.maps.LatLng(locations[i][1], locations[i][2]), 
 
     map: map, 
 
     content: locations[i][0] 
 
    }); 
 
    var infowindow = new google.maps.InfoWindow(); 
 
    google.maps.event.addListener(marker, 'click', (function(marker, i, infowindow) { 
 
     return function() { 
 
     console.log('Klick! Marker=' + this.content); 
 
     infowindow.setContent(this.content); 
 
     infowindow.open(map, this); 
 
     }; 
 
    })(marker, i, infowindow)); 
 
    bounds.extend(marker.position); 
 

 
    google.maps.event.trigger(marker, 'click'); 
 
    } 
 

 
    map.fitBounds(bounds); 
 

 
    var listener = google.maps.event.addListenerOnce(map, "idle", function() { 
 
    map.setZoom(8); 
 
    }); 
 
} 
 

 
function loadScript() { 
 
    var script = document.createElement('script'); 
 
    script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&' + 'callback=initialize'; 
 
    document.body.appendChild(script); 
 
} 
 

 
window.onload = loadScript;

html, 
 
body { 
 
    height: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
} 
 
#map-canvas { 
 
    height: 500px; 
 
    width: 800px; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

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

來源

2015-03-02 15:07:41 geocodezip

非常感謝。是的，我已經嘗試了關閉的事情，但似乎我錯過了一些東西。 ;）工程就像一個魅力。 :) https://jsfiddle.net/adsim/16Len8sh/3/ – Sven 2015-03-02 15:25:16

function close_popups(){ 
    for(var i = 0; i<marker.length; i++){ 
    marker[i]['infowindow'].close(); 
    } 
} 
google.maps.event.addListener(newmarker, 'click', function() { 
    close_popups(); 
     this['infowindow'].open(map, this); 
    });

來源

2016-06-18 05:34:33

你可以添加一個描述到你的答案？澄清可以幫助很多。 – Kote 2016-06-18 06:00:59

這將幫助你同時彈出關閉並打開標記點擊谷歌地圖。 – 2016-06-21 05:02:02

Google Maps API多個標記與Infowindows - 單擊事件衝突

回答

相關問題