簡介
在使用百度地圖的時候，我們需要在地圖上增加標注Marker來展示設置信息。隨着用戶需要不斷增多，加載更多的Marker標注信息成為了一種奢望。然而通過自己技術的提升，歸結出來了一下方案。
引入百度地圖
需要在百度http://lbsyun.baidu.com/index.php?title=jspopular注冊為開發者。此過程略過...
<head>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你申請的密鑰"></script>
</head>
在頁面HTML 的<head>里引入百度提供的s
實例化地圖
在body中創建div
<body>
<div id="allmap" style="height: 550px;"></div>
<script type="text/javascript">
// 百度地圖API功能
var map = new BMap.Map("allmap", { enableMapClick: false });//實例化百度地圖
map.centerAndZoom(new BMap.Point(116.404, 39.915), 5);//設置中心點位與縮放級別
map.enableScrollWheelZoom();//啟用滾動
</script>
</body>
這樣就打開HTML就可以看到頁面中引入的百度地圖了。
在地圖中創建Marker
// 百度地圖API功能 var map = new BMap.Map("allmap", { enableMapClick: false });//實例化百度地圖 map.centerAndZoom(new BMap.Point(116.404, 39.915), 5);//設置中心點位與縮放級別 map.enableScrollWheelZoom();//啟用滾動 var pt = null,//點位 i = 0,// mark=null;//新標注 for(; i < 10; i++) { pt = new BMap.Point(Math.random() * 40 + 85, Math.random() * 30 + 21);//隨機實例point mark=new BMap.Marker(pt);//實例marker map.addOverlay(mark);//添加到地圖上 };
現在地圖上就會有10Marker標注
給地圖綁定拖拽and縮放事件
//地圖綁定拖拽事件 map.addEventListener('dragend', function(e){ console.log('拖拽事件'); }); //地圖綁定滾動事件 map.addEventListener('zoomend', function(e){ console.log('縮放事件'); });
這樣的話當地圖縮放，或者拖拽時候就可以加載數據marker
獲取可視區域
獲取到可視區域就可以根據當前可視區域顯示maker數據。這樣避免不必要的marker顯示出來。
var bounds = map.getBounds(), //獲取可視區域 SouthWest = bounds.getSouthWest(), //可視區域左下角 NorthEast = bounds.getNorthEast(); //可視區域右上角 console.log("當前地圖可視范圍是：" + SouthWest.lng + "," + SouthWest.lat + "到" + NorthEast.lng + "," + NorthEast.lat);
獲取我們再次請求數據的時候，判斷當前marker是否存在，存在則不添加。這樣的話就會提升很大的速度。
最終案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>marker--標注點位優化方案</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=E06eb9d756d0eafc722effb355657b4c"></script>
</head>
<body>
<div id="allmap" style="height: 550px;"></div>
<p id='conunt'></p>
<script type="text/javascript">
// 百度地圖API功能
var map = new BMap.Map("allmap", { enableMapClick: false });//實例化百度地圖
map.centerAndZoom(new BMap.Point(116.404, 39.915), 5);//設置中心點位與縮放級別
map.enableScrollWheelZoom();//啟用滾動
var markers = [];//所有marker標注集合
//console.log(markers);
//地圖綁定拖拽事件
map.addEventListener('dragend', function(e){
getBounds('dragend');
});
//地圖綁定滾動事件
map.addEventListener('zoomend', function(e){
getBounds('zoomend');
});
/**
* 獲取可視區域
* @type {string} 類型
* */
function getBounds(type){
//函數節流
if(getBounds.timer){
clearTimeout(getBounds.timer);
getBounds.timer=null;
}
getBounds.timer=setTimeout(function(){
//如果超過2000則不加載
if(markers.length>=1000){
}else{
addMarker(100);//加載500個marker
}
var bounds = map.getBounds(), //獲取可視區域
SouthWest = bounds.getSouthWest(), //可視區域左下角
NorthEast = bounds.getNorthEast(); //可視區域右上角
console.log("當前地圖可視范圍是：" + SouthWest.lng + "," + SouthWest.lat + "到" + NorthEast.lng + "," + NorthEast.lat);
//處理顯示與隱藏的marker
var data=boundsShow(SouthWest.lng,NorthEast.lng,SouthWest.lat,NorthEast.lat);
//把不在可視區域的maker隱藏起來
for(var i=0,lengths=data.listhide.length;i<lengths;i++){
data.listhide[i].hide();
}
dom.innerText='共有：'+markers.length+'個點位，顯示：'+data.listshow.length+'個點位';//設置地圖上的marker數量
},200);
}
/**
* 在可視區域顯示，不在可視區域隱藏
* @smlng {number} 小 經度
* @bglng {number} 大 經度
* @smlat {number} 小緯度
* @bglat {number} 大緯度
*
* return 返回顯示的數量與隱藏的數量
* */
function boundsShow(smlng,bglng,smlat,bglat){
var listhide=[],//隱藏的數據
listshow=[];//顯示的數據
for(var i=0,lengths=markers.length;i<lengths;i++){
var _point=markers[i].point;
//如果marker的經度 小於可視范圍的最大經度大於可視范圍的最小經度--
//並且marker的緯度 小於可是范圍的最大緯度大於可視范圍的最小緯度--則需要顯示
if(smlng<_point.lng && _point.lng<bglng && smlat<_point.lat && _point.lat < bglat){
//顯示
listshow.push(markers[i]);
//如果之前被隱藏則顯示
if(!markers[i].isVisible()){
markers[i].show();
}
}else{
//不顯示
listhide.push(markers[i]);
}
}
//返回顯示的數量與隱藏的數量
return{
listshow:listshow,
listhide:listhide
}
}
/**
* 新增marker
* @MAX {number} 數量
* */
function addMarker(MAX){
dliags(true,'加載中...');
var pt = null,//點位
i = 0,//
mark=null;//新標注
for(; i < MAX; i++) {
pt = new BMap.Point(Math.random() * 40 + 85, Math.random() * 30 + 21);//隨機實例point
mark=new BMap.Marker(pt);//實例marker
map.addOverlay(mark);//添加到地圖上
markers.push(mark);//存儲到數組中
};
//等待繪制引擎渲染完畢再清楚彈出層
setTimeout(function(){
dliags(false);
},0);
}
/**
* 彈出層
* @state {Boolean} true:顯示 or false：隱藏
* @txt {string} 顯示文字
* */
function dliag(){
var dom=null;
return function(state,txt){
var dlog=null,p=null;
//如果為 true:顯示
if(state){
if(dom){
document.body.appendChild(dom);
}else{
p=document.createElement('p');
p.innerText=txt;
p.style.width='100px';
p.style.height='45px';
p.style.textAlign='center';
p.style.position='absolute';
p.style.margin='auto';
p.style.zIndex='2';
p.style.left='0';
p.style.right='0';
p.style.bottom='0';
p.style.top='0';
p.style.backgroundColor='#F2F2F2';
p.style.lineHeight='45px';
p.style.borderRadius='5px';
dlog=document.createElement('div');
dlog.style.position='absolute';
dlog.style.zIndex='1';
dlog.style.margin='auto';
dlog.style.left='0';
dlog.style.right='0';
dlog.style.bottom='0';
dlog.style.top='0';
dlog.style.backgroundColor='#000';
dlog.style.opacity='0.6';
dom=document.createElement('div');
dom.appendChild(dlog);
dom.appendChild(p);
document.body.appendChild(dom);
}
}else{
document.body.removeChild(dom);
}
}
}
//彈出框
var dliags=dliag();
//添加marker
addMarker(100);
//獲取conunt
var dom=document.getElementById('conunt');
//設置顯示數量
dom.innerText='共有：'+markers.length+'個點位，顯示：'+markers.length;
</script>
</body>
</html>
參考鏈接 demo
總結
在使用百度地圖的時候,有時候會被百度地圖限制 但是我們能優化的也只有js,能夠讓地圖少渲染瀏覽器少繪制,就會把性能提升到最大化