【百度地图API】自行获取区域经纬度的工具

【百度地图API】自行获取区域经纬度的工具

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

工具说明:

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

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

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

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

全部源代码:

<!DOCTYPE htmlhttp-equiv="Content-Type" content="text/html; charset=gb2312" />title行政区域工具</titlescript ="text/javascript"="http://api.map.baidu.com/api?v=1.2"></script</style="width:520px;height:340px;border:1px solid gray"="container"></><input ="startBtn"="button" onclick="startTool();" value="开启取点工具" /><input ="button" onclick="map.clearOverlays();document.getElementById('info').innerHTML = '';points=[];" value="清除" /></="info"></</</script ="text/javascript"  BMap.Map(container 创建Map实例map.centerAndZoom( 初始化地图,设置中心点坐标和地图级别  newpoint;   一个经纬度 points 数组,放经纬度信息 polyline   BMap.Polyline(); 折线覆盖物function startTool(){   ){        document.getElementById(startBtn).style.background  green;        document.getElementById(startBtn).style.color  white;        document.getElementById(startBtn).value  {        document.getElementById(startBtn).style.background  ;        document.getElementById(startBtn).value  ;    }}map.addEventListener(clickfunction单击地图,形成折线覆盖物    newpoint   BMap.Point(e.point.lng,e.point.lat);        if(points[points.length].lng==points[points.length-1].lng){alert(111);}        points.push(newpoint);  将新增的点放到数组中        polyline.setPath(points);   设置折线的点数组        map.addOverlay(polyline);   将折线添加到地图上        document.getElementById().innerHTML  new BMap.Point(  e.point.lng    e.point.lat  ),</br>输出数组里的经纬度    }});map.addEventListener(dblclickfunction双击地图,形成多边形覆盖物){        map.disableDoubleClickZoom();   关闭双击放大 polygon   BMap.Polygon(points);        map.addOverlay(polygon);   将折线添加到地图上</script

此条目发表在未分类分类目录,贴了标签。将固定链接加入收藏夹。