五年來,jQuery tinyMap 已邁入 v2.8.4,期間也是因為有許多網友們的建議,才能有逐漸成型的今日,就連 Facebook 分享數都突破了 300 大關,真是深感意外。

所以我整理了幾個比較特殊的問題並整理成範例讓更多人可以參考。

找出距離最近的標記

可以利用 Google Maps API 提供的幾何圖形程式庫來計算各點與目前的直線距離。

要使用該程式庫,在引入 API 時需加上 libraries=geometry 參數:

<script src="//maps.google.com/maps/api/js?sensor=false&libraries=geometry"></script>

在 Map Idle 事件內用迴圈逐一比對各標記與某點之間的距離,並將所得結果(公尺)存入陣列,再找出陣列最小值的索引值即可。

將地圖置放於 Collapse 或 Tab 容器內導致的顯示異常

Google Maps 會在容器寬高有異動時觸發 resize 事件。通常 Collapse 或 Tab 都使用 display: none/block 來達成效果,而這也會直接改變容器的寬高為 0,因此地圖再次顯示時就會不完整。

這個問題有兩種解決方法:

display: none/block 更改為 visibility: hidden/visible,然而這會導致該元素雖然隱藏了,但實際上仍然佔用住原始的空間,只是看不見該元素而已。

所以另一種手動觸發 resize 的方式較為適合。

以 Bootstrap 3 Collapse 為例:

$('#collapsible').on('shown.bs.collapse', function () {
    // 再觸發一次 resize 事件
    google.maps.event.trigger(MAP, 'resize');
});

點選 HTML 清單來移動地圖至點選的地址

使用 id 給予標記唯一識別,並利用 instance 取得標記陣列,再移動地圖至符合 id 的標記位置。

讀取地圖後開啟 infoWindow 或 點選按鈕控制 infoWindow

適用 v2.7.0 或更新版本

點選 marker 自動關閉其他已開啟的 infoWindow

v2.8.4 已新增 infoWindowAutoClose (bool) 參數可設置是否自動關閉。

2.8.3 – 2.7.0 版本請參考:

利用縮放取得地圖範圍內的標記

綁定地圖的 zoom_changed 事件,並利用 instance 取得目前範圍,再用迴圈逐一比對標記是否在範圍內。

延伸閱讀