在地圖上點擊鏈接時顯示信息框

Question

我在想如果有人知道我可以如何讓地圖下方的「鏈接」與地圖進行交互（請參閱下圖）。

比方說，我想點擊喬治..比地圖中的信息框應該是可見的。如果我點擊另一個，那麼這應該是可見的，等等。

的HTML與鏈接：

<ul> 
    <li><a>George</a></li> 
    <li><a>Hoppe</a></li> 
    <li><a>Café Herengracht</a></li> 
</ul> 

從信息框的HTML：

<div> 
    <div class="infoBox"></div> 
// here comes another infobox (when clicked on icon) 
// here comes another infobox (when clicked on icon) 
// here comes another infobox (when clicked on icon) 
// etc.. 
</div> 

其他InfoBoxes到是現在不在DOM中......只有當你在地圖上點擊它們！

我不知道在哪裏可以找到javascript，如果我知道我不認爲我會認識到使信息框出現在DOM中的函數。

我使用這個地圖簡碼在Avade WordPress主題： https://avada.theme-fusion.com/google-maps/

謝謝！

Answer 1

是否需要允許一次打開多個信息窗口？如果沒有，我會建議只有一個信息窗口元素。只需一個信息窗口，您只需監聽點擊事件，然後點擊一次即可打開信息窗口的位置和內容。

Google Maps JavaScript API documentation有一個Listening to DOM events的示例，它顯示瞭如何使用地圖之外的元素（在您的地圖下方的鏈接）與地圖進行交互。

下面的僞代碼顯示瞭如何註冊更新並顯示信息窗口的'click'事件偵聽器的基本概述。有關Google Maps Info Window的更多信息，請查看example on info windows。

HTML

<ul> 
    <li><a id="mapTriggerGeorge">George</a></li> 
</ul> 

的JavaScript

var infowindow = new google.maps.InfoWindow({ 
    content: 'Hello World!' 
}); 

var georgeTrigger = document.getElementById('mapTriggerGeorge'); 

google.maps.event.addDomListener(georgeTrigger, 'click', function() { 
    infoWindow.setContent('Hello World from George!'); 
    infowindow.open(map, marker); 
});