zoukankan      html  css  js  c++  java
  • 百度地图只加载视野内的坐标点

    功能说明:覆盖物多于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 ={150,height:40,title:"<b>公司名称:<b>"};
    var iw = new BMap.InfoWindow("&nbsp;&nbsp;"+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 ={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);
    }
  • 相关阅读:
    将本地html文件拖到IE8浏览器无法打开,直接弹出一个下载的对话框
    ImageMagick
    64位win8.1系统 运行 32位程序,文件夹路径是中文遇到问题
    Dreamweaver
    JBOSS Spring Web
    spring web应用
    SQL PKG示例
    SQL分区表示例
    Java RMI 框架(远程方法调用)
    Java NIO 进程间通信
  • 原文地址:https://www.cnblogs.com/hzcya1995/p/13317777.html
Copyright © 2011-2022 走看看