1. 程式人生 > >百度地圖(多點定位+聚合)

百度地圖(多點定位+聚合)

初始化 默認 each 直接 搜索 不能 行政 參數 全部

首先頁面引用必須的兩個JS

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的Key值"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js"></script>

頁面就很簡單就一個DIV搞定:

<div id="containerProduct"></div>

下面的才是重點:

首先我們要初始化地圖以及定義一些全局變量:

技術分享圖片

技術分享圖片

行政區域的JS:
技術分享圖片

既然已經初始化地圖了,那下面當然就是獲取數據啦:

技術分享圖片

數據的格式如下:

技術分享圖片

IsFirst一開始默認是true,到後面查詢數據或篩選數據的時候在把IsFirst設為false,使它執行else中的代碼-清除所有標註和聚合以及清空marker數組(這樣寫的作用是直接清除地圖上的標註,而不用去重新初始化地圖來重置標註,節省了性能以及提高了用戶使用體驗度)。

獲取到了數據之後就是生成標註了:

技術分享圖片

這裏有個JS的Each循環的小坑,i和k在這裏都是沒有用的,但是我們又不能去掉,因為Each必須是兩個參數。汗顏!

點聚合方法:

技術分享圖片

標註單擊事件:

技術分享圖片

單擊之後的信息窗口:

技術分享圖片

opts為(這裏只是部分而已,全部太長了所以就粘出來了):

技術分享圖片

到這裏基本就完成了!

哦!對了,還有查詢和篩選數據的方法呢!

技術分享圖片

技術分享圖片

現在才是大功告成的時候!下面是效果圖:

技術分享圖片

技術分享圖片

右邊的搜索框代碼就不粘了,太簡單了!!

百度地圖(多點定位+聚合)