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

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

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

工具说明：

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

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

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

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

全部源代码：

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>行政区域工具</title><script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script></head><body><div style="width:520px;height:340px;border:1px solid gray" id="container"></div><p><input id="startBtn" type="button" onclick="startTool();" value="开启取点工具" /><input type="button" onclick="map.clearOverlays();document.getElementById('info').innerHTML = '';points=[];" value="清除" /></p><div id="info"></div></body></html><script type="text/javascript">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 + "),</br>";    //输出数组里的经纬度    }});map.addEventListener("dblclick",function(e){   //双击地图，形成多边形覆盖物if(key==0){        map.disableDoubleClickZoom();   //关闭双击放大var polygon = new BMap.Polygon(points);        map.addOverlay(polygon);   //将折线添加到地图上    }});</script>

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

vue百度地图API、获取当前经纬度以及地理位置
百度API的使用一.创建MAP实例 var self = thiswindow.map = new BMap.Map(this.$refs.allmap); // 创建Map实例window.geo ...
python批量爬取小网格区域坐标系_Python爬虫实例_利用百度地图API批量获取城市所有的POI点...
上篇关于爬虫的文章,我们讲解了如何运用Python的requests及BeautifuiSoup模块来完成静态网页的爬取,总结过程,网页爬虫本质就两步: 1.设置请求参数(url,headers,co ...
【python】python利用百度地图API：获取经纬度、地图撒点
本文目的: python通过百度地图API,获取所给地址的经纬度,并且在百度地图上进行撒点. 另:百度地图API功能强大,如: GPS功能(单个点沿线运动). 信息窗口示例(添加纯文字的信息窗口). ...
百度地图AK申请注意+百度地图API生成热力图+调用百度地图API自动获取经纬度和地址
文章目录一.百度地图AK密钥申请二.调用百度地图API生成热力图三.调用百度地图API自动获取经纬度和地址一.百度地图AK密钥申请点击百度地图API控制台,输入登录账户,即可进入,若账户未完 ...
Python3调用百度地图API接口获取结构化地址
在实际应用中,我们也许会有这样的需求,输入一个地名,就能够知道这个地方的准确地址.例如输入"清华大学",我们就可以知道清华大学在北京的哪个区哪条道路.正好百度地图开放平台服务提供了 ...
php 百度地图api获取经纬度,调用百度地图API接口获取地铁站的经纬度信息
今天我们来看一下,如何通过百地图API来获取地点的经纬度.首先百度地图提供了强大的API接口,我们可以通过调用它来实现目的.这是网址:https://lbsyun.baidu.com/.首先想要调用A ...
C# 通过百度地图API，获取访问IP详细地址（上网IP的大致位置信息,一般为城市级别)
1.创建接受Json格式数据类 namespace BaiduMap {[Serializable]public class IpLocationResult{/// <summary>/ ...
百度地图API实现多区域标记
最近遇到一个业务就是需要需要在地图上标记多个区域.一般餐饮业做外卖的,配送范围一般是多区域的,那么在地图上标记配送范围的时候就需要能标记多个区域.长话短说,最初的实现原型的截图如下: 实现思路如下: ...
百度地图API之获取真实轨迹
引入百度地图API中的AK(官网申请,免费的) 1.创建地图实例 2.添加定位控件(当前仅能定位到市) 3.设置存放坐标点的数组,获取点击时的点坐标 4. 自定义路径获取函数 getPath() 5. ...

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

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

最新文章

热门文章