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

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

工具说明:

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

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

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

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

全部源代码:

  1. <!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】自行获取区域经纬度的工具的更多相关文章

  1. Python利用百度地图api批量获取地址经纬度

    1.pip安装xlrd,xlwt,requests模块. 2.在工程目录处放置地点Excel文件. python2.7.13代码: #coding:utf-8 import xlrd import x ...

  2. 利用百度地图API,获取经纬度坐标

    利用百度地图API,获取经纬度坐标 代码很简单,但在网上没找到现成的获取地图经纬度的页面. 就是想,给当前页面传递一个经纬度,自动定位到此经纬度.然后可以重新选择,选择完返回经纬度. 效果如下: 源代 ...

  3. 【百度地图API】手机浏览器抓包工具及其使用方法

    原文:[百度地图API]手机浏览器抓包工具及其使用方法 摘要:为了测试地图API在手机浏览器上的性能,需要给手机浏览器设置代理.通过代理,我们可以在PC上获取到抓包数据.进而对性能做进一步分析. -- ...

  4. 用户Ip地址和百度地图api接口获取用户地理位置(经纬度坐标,城市)

    <?php   //获取用户ip(外网ip 服务器上可以获取用户外网Ip 本机ip地址只能获取127.0.0.1) function getip(){     if(!empty($_SERVE ...

  5. 使用百度地图API自动获取地址和经纬度

    先上效果图,这是直接点击获取经纬度和地址的.没有做搜索的功能. 代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitiona ...

  6. 百度地图API实现多区域标记

    最近遇到一个业务就是需要需要在地图上标记多个区域.一般餐饮业做外卖的,配送范围一般是多区域的,那么在地图上标记配送范围的时候就需要能标记多个区域.长话短说,最初的实现原型的截图如下:

  7. 百度地图API 根据地址查询经纬度

    html页面.引用上API: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> ...

  8. 百度地图api将可视区域定位到当前所在位置

    1.前言 开头不说点什么,总是有点不习惯.还是说点什么吧,关于百度地图,我用的次数还是比较多的,没办法,需求呀.好吧,在用百度地图的时候,确实有过很多需求,不过好在百度地图很强大,每次需求在探索后都能 ...

  9. 百度地图API地址转换成经纬度

    public class LngAndLatUtil { public static Map<String,Double> getLngAndLat(String address){ Ma ...

随机推荐

  1. GLEW_ERROR_NO_GL_VERSION的解决方法

    关于 GLenum err = glewInit(); if (GLEW_OK != err) fprintf(stderr, "error initializaing GLew %s\n& ...

  2. shell 脚本运算符

    1.数值 格式: test "num1" opr "num2" [ "num1" opr "num2" ] opr 取值 ...

  3. 打印出所有&quot;水仙花数

    时间限制: 1 Sec  内存限制: 128 MB 提交: 695  解决: 352 [提交][状态][讨论版] 题目描述 打印出所有"水仙花数",所谓"水仙花数&quo ...

  4. XXTEA 加密算法 C++ C#兼容版本号

    1.一个不错的可逆加密算法XXTEA 之前无意中看到了TexturePacker 使用了XXTEA来加密图片资源.所以花了点时间来看了下XXTEA. 一般有两种加密算法:1.像md5,SHA1,等ha ...

  5. Oracle生成查询包括对应于所有数据表记录语句中指定的字段名

    应用:已知的字段名,表中的所有数据的查询数据库中包含的所有数据表的字段名 操作方法:指定字段名,用户数据库表,它可以执行以下查询 --Oracle生成查询包括对应于所有数据表记录语句中指定的字段名 d ...

  6. mbed列--基于飞思卡尔FRDM KL25Z鼠标设计的高速实现

    ========================================================== 原创文章转载请注明:blog.csdn.net/guo8113 ========= ...

  7. JGroups 入门实践(转)

    前言 JGroups是一个开源的纯java编写的可靠的群组通讯工具.其工作模式基于IP多播,但可以在可靠性和群组成员管理上进行扩展.其结构上设计灵活,提供了一种灵活兼容多种协议的协议栈. JGroup ...

  8. Swift UI学习UITableView and protocol use

    Models: UserModel.swift Views: UserInfoCell.swift Controllers: RootViewController.swift, DetailViewC ...

  9. javascript于&quot;return obj === void 0&quot;这样的书面理由和优势

    得知underscore.js什么时候,查看源代码经常出现的类别似下面的代码: if (context === void 0) return func; if (array == null) retu ...

  10. CVE-2014-4113:飓风熊猫(HURRICANE PANDA)Win64bit提起权0day破绽

    飓风熊猫被觉得是原产于中国.主要针对基础设施公司的先进攻击者.我们知道它们除了拥有0day漏洞外.还有其它的三种本地特权提升漏洞.我们知道飓风熊猫使用的是"ChinaChopper" ...