如何爲Google地圖標記添加自定義工具提示？

Question

我需要在谷歌地圖標記的鼠標懸停上顯示一些漂亮的工具提示圖像和文本。
marker.setTitle - 僅適用於文本但不適用於html
谷歌地圖API是否有標準解決方案？
你可以請建議庫創建工具提示，讓他們看起來不錯？

Answer 1

您可以聽標記上的mouseover事件，並觸發infoWindow以顯示該事件。

一旦你有了infowindow，你可以用api支持的方式放入圖片和文本。

Answer 2

這是我在一個項目上做的，如果你想DIY解決方案。

1. 在css位置設置爲絕對的情況下在頁面上創建一個隱藏div。確保你的DIV出現在你的地圖容器之上（z-index）。
2. 將mouseover和mouseout事件綁定到您的標記以觸發showDiv/hideDiv函數。
3. 鼠標懸停標記時，獲取鼠標x，y位置，相應地設置DIV頂部和左側css值，並將其CSS設置爲顯示：block;
4. 當鼠標不在時，再次隱藏DIV。

這樣你就可以真正控制你的「infowindow」如何出現以及它將包含什麼內容。祝你好運。

Answer 3

奧列格，你爲什麼要綁定到谷歌地圖api。您可以將自定義工具提示插入到DOM中。

在地圖（或地圖的特定部分）上爲mouseover，mousemove和mouseout偵聽器附加事件偵聽器。這些聽衆中的每一個也給你一個給你鼠標座標的參數。

使用固定/絕對款式上提示的CSS的定位它

鼠標懸停，注入光標所在位置的工具提示到DOM 上的鼠標移動，鼠標移開時更新位置（左上） ，從DOM中刪除工具提示。

我最近建立了這個谷歌地圖多邊形。因爲Google地圖上的幾乎所有功能都支持事件，所以您可以將我的方法重新用於地圖的任何其他部分。

鏈接：https://medium.com/@asimmittal/custom-tooltips-for-google-maps-in-pure-javascript-a8004b8e9458