百度地图只加载视野内的坐标点
转载
功能说明:覆盖物多于300操作不流畅,只加载视野内的坐标点可改善加载速度尽可能多的加载覆盖物、坐标点;
如下是JS 脚本:
var map,info,bssw,bsne,cur_bssw,cur_bsne,lenboo=false;
function displayMap(){
var ids="";
var arrSon = document.getElementsByName("checkbox");
for(i=0;i<arrSon.length;i++) {
if(arrSon[i].checked)ids+=","+arrSon[i].value;
}
if(ids.length<1){
alert("请选择业务员!");
return;
}else if(ids.length<40){
lenboo=true;
}
var url = "<%=basePath %>terminal/gps!loadShopGps.action?ids="+ids.substring(1,ids.length);
asyncRequestCallback(function(data){
loadMaps(data.lineList,data.cur_gps);
},url);
}
function loadMaps(dtoList,cur_gps){
map = new BMap.Map("map_canvas");
info=cur_gps.split(",");
var centerpoint = new BMap.Point(info[1],info[0]);
map.centerAndZoom(centerpoint, 14);
map.enableScrollWheelZoom();
map.addControl(new BMap.NavigationControl());
map.addControl(new BMap.MapTypeControl({mapTypes:[BMAP_NORMAL_MAP,BMAP_HYBRID_MAP]}));
map.addControl(new BMap.ScaleControl());
map.addControl(new BMap.OverviewMapControl());
map.addEventListener("dragend", function(e){
cur_bssw=map.getBounds().getSouthWest();
cur_bsne=map.getBounds().getNorthEast();
if(cur_bssw.lng!=bssw.lng || cur_bssw.lat!=bssw.lat)loopDisplayMap(dtoList);
})
map.addEventListener("zoomend", function(){
cur_bssw=map.getBounds().getSouthWest();
cur_bsne=map.getBounds().getNorthEast();
if(cur_bssw.lng!=bssw.lng || cur_bssw.lat!=bssw.lat)loopDisplayMap(dtoList);
});
loopDisplayMap(dtoList)
}
function loopDisplayMap(dtoList){
map.clearOverlays();
var mk =new BMap.Marker(new BMap.Point(info[1],info[0]));
map.addOverlay(mk);
var opts ={width:150,height:40,title:"<b>公司名称:<b>"};
var iw = new BMap.InfoWindow(" "+info[2],opts);
mk.addEventListener("mouseover",function(){
mk.openInfoWindow(iw,new BMap.Point(info[1],info[0]));
});
mk.addEventListener("mouseout",function(){
mk.closeInfoWindow(iw);
});
var icon1= new BMap.Icon("<%=basePath%>common/images/pin_little.png",new BMap.Size(10,13),{anchor:new BMap.Size(5,13)});
var icon2= new BMap.Icon("<%=basePath%>common/images/pin_red.png",new BMap.Size(18,25),{anchor:new BMap.Size(9,25)});
var icon3= new BMap.Icon("<%=basePath%>common/images/pin_yellow.png",new BMap.Size(18,25),{anchor:new BMap.Size(9,25)});
var icon4= new BMap.Icon("<%=basePath%>common/images/pin_green.png",new BMap.Size(18,25),{anchor:new BMap.Size(9,25)});
var list,arr,shop,polyline;
var bs= map.getBounds();
bssw = bs.getSouthWest();
bsne = bs.getNorthEast();
for(var i = 0; i < dtoList.length; i++){
list=dtoList[i].gpsShopList;
arr=new Array();
for(var j = 0; j < list.length; j++){
shop = list[j];
if(bssw.lng<shop.longitude && bssw.lat<shop.latitude && bsne.lng>shop.longitude && bsne.lat>shop.latitude){
addRedDot(shop,shop.state==-1?icon1:shop.state==0?icon2:shop.state==1?icon3:icon4,dtoList[i].lineName,dtoList[i].realName);
arr.push(new BMap.Point(shop.longitude,shop.latitude));
}
}
polyline = new BMap.Polyline(arr,{strokeColor:"blue", strokeWeight:1, strokeOpacity:1});
if(lenboo)map.addOverlay(polyline);
}
}
function addRedDot(shop,icon,lineName,realName){
var p1 = new BMap.Point(shop.longitude,shop.latitude);
var marker=new BMap.Marker(p1,{icon:icon,raiseOnDrag:true});
marker.addEventListener("click", function(e){
var opts ={width:250,height:98,title:"<b>"+realName+"</b>"};
var addr="所属线路:"+lineName+"<br/>门店名称:"+shop.shopName+"<br/>详细地址:"+shop.chinaAddress;
var infoWindow = new BMap.InfoWindow(addr, opts); //创建信息窗口对象
marker.openInfoWindow(infoWindow);
});
map.addOverlay(marker);
}
提问和评论都可以,用心的回复会被更多人看到
评论
发布评论
相关文章
-
百度云AI
在人工智能的浪潮中,人脸识别技术如同一颗璀璨的明珠,吸引着无数科技爱好者的目光。
百度云 java 人脸识别 -
百度地图之收索视野内的建筑物
根据用户移动地图的位置,显示在视野范围内的建筑物,简
sql mysql git -
GPS坐标转换百度地图坐标
用PHP实现 GPS坐标转换成百度地图坐标【更多最新文章请浏览http://b.unprofessional.pw】
PHP Google Javascript 百度地图 -
Cesium:加载百度地图
cesium加载百度地图
ide html 3d C -
百度地图 layer弹出地图 获取坐标
layer弹出百度地图 经度 纬度 点击我
拖拽 html 百度地图 -
leaflet加载百度地图底图
一、介绍 leaflet使用百度地图,叠加层使用谷歌坐标;leaflet默认使用谷歌坐标
ajax .net Math -
【百度地图】——利用三级联动加载百度地图
【百度地图】——利用三级联动加载百度地图HTML+CSS代码如下:<!DOCTYPE html><html lang="en
js 前端 街景地图 html ajax