記錄每一個小坑、大坑
目前做項目接觸到了如百度地圖點聚合的需求，老規(guī)矩，看文檔記筆記。
0. 其它
1. 點聚合
點聚合 （MarkerClusterer 標記聚合器）用來解決加載大量點要素到地圖上產(chǎn)生覆蓋現(xiàn)象的問題，并提高性能。
百度地圖-點聚合
2. 簡單實例
- HTML \ CSS
<style>
body, html {width: 100%;height: 100%;margin: 0;font-family: "微軟雅黑";}
#allmap {width: 100%;height: 500px;}
p {margin-left: 5px;font-size: 14px;}
/*隱藏百度logo*/
.anchorBL {
display: none!important;
}
</style>
<body style="min-height: 100%;">
<div id="allmap"></div>
</body>
-
JS
- 啟用點聚合功能，其中的 data 可以根據(jù)需求進行異步獲取，得到的數(shù)據(jù)中應當有橫縱坐標
- 可以開啟定位，達到每次打開地圖快速定位到相關位置
<script type="text/javascript"
src="http://api.map.baidu.com/api?v=2.0&ak=密鑰"></script>
<script type="text/javascript"
src="http://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js"></script>
<script type="text/javascript"
src="http://api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js"></script>
<script>
// 百度地圖API功能
var map = new BMap.Map("allmap");
var point = new BMap.Point(116.331398,39.897445);
map.centerAndZoom(point,6);
//啟用滾輪放大縮小
map.enableScrollWheelZoom(true);
// 相關數(shù)據(jù)(也可以根據(jù)需求異步獲取）
// 可以確定的是每條數(shù)據(jù)應要有橫縱坐標
var data = [{"mapy": "32.94584", "mapx": "112.894350", "time": "12:30"},
{"mapy": "33.34683", "mapx": "112.694300", "time": "11:30"},
{"mapy": "33.54702", "mapx": "112.094380", "time": "10:30"},
{"mapy": "33.148780", "mapx": "116.494390", "time": "13:30"}
];
var markers = [];
// 遍歷得到的數(shù)據(jù)
$.each(data, function (i, item) {
// 橫縱坐標定點
var point = new BMap.Point(item.mapx, item.mapy);
var marker = new BMap.Marker(point);
// 獲取數(shù)據(jù)
var content = item.time;
// 添加點擊事件
//addClickHandler(content, marker);
markers.push(marker);
});
// 根據(jù)ip定位
function myFun(result){
var cityName = result.name;
map.setCenter(cityName);
console.log("當前定位城市:"+cityName);
}
var myCity = new BMap.LocalCity();
myCity.get(myFun);
// 添加點聚合效果
var markerClusterer = new BMapLib.MarkerClusterer(map, {markers: markers});
</script>
- 聚合點的樣式修改
如果覺得默認樣式不好看，或者有特殊的需求，可以自定義點的樣式
// 添加點聚合效果
var markerClusterer = new BMapLib.MarkerClusterer(map, {
markers: markers,
//最小的聚合數(shù)量，小于該數(shù)量的不能成為一個聚合，默認為2
minClusterSize: 2,
styles: [{
// 此處URL不知道能否用本地圖片，自己試了一下不能，待解答！
url: 'dist/img/smallred.png',
size: new BMap.Size(0, 0)
}]
});
3. 添加點擊事件
正常情況下會需要為每個點添加點擊事件，如彈出彈窗顯示信息
彈窗
- 添加點擊事件
// 添加點擊事件,可在循環(huán)數(shù)據(jù)時調(diào)用
function addClickHandler(content, marker) {
marker.addEventListener("click", function (e) {
openInfo(content, e)
}
);
}
- 彈窗
-
openInfo(content, e)，這里可以傳需求的參數(shù)； -
var infoWindow = new BMap.InfoWindow( 拼接數(shù)據(jù) , opts);， 這里可以自定義拼接參數(shù)；
-
// 彈窗
var opts = {
width: 270, // 信息窗口寬度
height: 100, // 信息窗口高度
enableMessage: true//設置允許信息窗發(fā)送短息
};
// 彈窗點擊事件
function openInfo(content, e) {
var p = e.target;
var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
// 創(chuàng)建信息窗口對象
var infoWindow = new BMap.InfoWindow(`<div>自定義內(nèi)容</div><div>${content}</div>` , opts);
//開啟信息窗口
map.openInfoWindow(infoWindow, point);
}
4. 結(jié)束
1.更加復雜的需求也沒接觸到，先整理這么多。
2.期間彈窗部分想結(jié)合 layer 來做的，不過失敗了，報錯是：不是一個正確的節(jié)點，layer 是封裝好的可能不行。
3.把 layer 組件放在 “BMap.InfoWindow( layer組件 , opts)” 的第一個參數(shù)是可以調(diào)用的，但是后臺報錯了，最后還是放棄了這個想法。
點個贊唄！
