使用百度地图实现地图网格的示例

2023-09-16 18:51:05 132

varZMap=function(id,center,level){ this.initCenter=newZPoint(116.404,39.915);//初始化的中心点，同时为了定义网格的中心点 this.id=id;//div的id this.level=level?level:13;//地图级别 this.center=center?center:this.initCenter;//中心点 this.map=null;//百度地图实例 this.xgrids=[];//经线 this.ygrids=[];//纬线 this.beSelectBounds={}; this.bounds=null;//当前地图的四个顶点 this.span=null;//当前网格的跨度 this.init(); } ZMap.prototype={ init:function(){//全局初始化 varzMap=this; this.map=newBMap.Map(this.id); this.map.centerAndZoom(this.center.point,this.level); this.map.enableScrollWheelZoom(); this.map.disableInertialDragging(); this.map.addControl(newBMap.NavigationControl({ anchor:BMAP_ANCHOR_BOTTOM_RIGHT, type:BMAP_NAVIGATION_CONTROL_ZOOM }));//缩放按钮 this.map.addControl(newBMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT,offset:newBMap.Size(80,25)}));//比例尺 this.map.disableDoubleClickZoom(); this.map.setMapStyle({style:'googlelite'}); this.initProperty(); this.initGrid(); //添加移动后的点击事件 this.map.addEventListener("dragend",function(){ zMap.initProperty(); zMap.initGrid(); }); //添加放大或缩小时的事件 this.map.addEventListener("zoomend",function(){ zMap.initProperty(); zMap.initGrid(); }); //设置点击事件 this.map.addEventListener("click",function(e){ varpoint=e.point; //获取当前点是在哪个区块内,获取正方形的四个顶点 varpoints=zMap.getGrid(point); //判断当前区域是否已经被选中过，如果被选中过则取消选中 varkey=''+points[0].lng+points[0].lat+points[2].lng+points[2].lat;//使用两个点的坐标作为key if(zMap.beSelectBounds[key]){ zMap.map.removeOverlay(zMap.beSelectBounds[key]); deletezMap.beSelectBounds[key]; return; } varpolygon=newBMap.Polygon(points,{strokeColor:"red",strokeWeight:2,strokeOpacity:0.5}); zMap.map.addOverlay(polygon); zMap.beSelectBounds[key]=polygon; }); }, initProperty:function(){//初始化当前地图的状态 this.level=this.map.getZoom(); this.bounds={ x1:this.map.getBounds().getSouthWest().lng, y1:this.map.getBounds().getSouthWest().lat, x2:this.map.getBounds().getNorthEast().lng, y2:this.map.getBounds().getNorthEast().lat }; this.span=this.getSpan();//需要使用level属性 }, initGrid:function(){//初始化网格 varzMap=this; //将原来的网格线先去掉 for(variinzMap.xgrids){ this.map.removeOverlay(zMap.xgrids[i]); } zMap.xgrids=[]; for(variinzMap.ygrids){ this.map.removeOverlay(zMap.ygrids[i]); } zMap.ygrids=[]; //获取当前网格跨度 varspan=zMap.span; //初始化地图上的网格 for(vari=zMap.bounds.x1+(zMap.initCenter.point.lng-zMap.bounds.x1)%span.x-span.x;i

总结：好了这篇随笔就这么多了，欢迎大家指正。

以上这篇使用百度地图实现地图网格的示例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

使用百度地图实现地图网格的示例

热门推荐

随机推荐