摘要:上一章教大家如何建立自己的行政区域地图。这次为大家提供一个,可视化选择区域,并且能自动生成经纬度代码的工具。工具的源代码完全公开,并且做了详尽的注释。可以单纯做为一个工具,也可做为百度地图API的学习案例。

 

工具说明:

1、开关可以控制,是否在地图上建立折线覆盖物

2、双击地图,会建立多边形覆盖物

3、自动输入的经纬度信息,最后一行不要复制。因为map的dblclcik事件,会先触发两次click,最后才是dblclick。

4、清除按钮可以清除覆盖物,清除经纬度数据,重新来一次

 

 

 

 

全部源代码:

行政区域工具

var map = new BMap.Map("container");                        // 创建Map实例map.centerAndZoom("北京", 11);     // 初始化地图,设置中心点坐标和地图级别var key = 1;    //开关var newpoint;   //一个经纬度var points = [];    //数组,放经纬度信息var polyline = new BMap.Polyline(); //折线覆盖物function startTool(){   //开关函数if(key==1){        document.getElementById("startBtn").style.background = "green";        document.getElementById("startBtn").style.color = "white";        document.getElementById("startBtn").value = "开启状态";        key=0;    }    else{        document.getElementById("startBtn").style.background = "red";        document.getElementById("startBtn").value = "关闭状态";        key=1;    }}map.addEventListener("click",function(e){   //单击地图,形成折线覆盖物    newpoint = new BMap.Point(e.point.lng,e.point.lat);    if(key==0){    //    if(points[points.length].lng==points[points.length-1].lng){alert(111);}        points.push(newpoint);  //将新增的点放到数组中        polyline.setPath(points);   //设置折线的点数组        map.addOverlay(polyline);   //将折线添加到地图上        document.getElementById("info").innerHTML += "new BMap.Point(" + e.point.lng + "," + e.point.lat + "),
";    //输出数组里的经纬度    }});map.addEventListener("dblclick",function(e){   //双击地图,形成多边形覆盖物if(key==0){        map.disableDoubleClickZoom();   //关闭双击放大var polygon = new BMap.Polygon(points);        map.addOverlay(polygon);   //将折线添加到地图上    }});