原文:【百度地图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. Make a dent in the universe

    李自成<一个数学家平反>.就像我第一次读同一,我感到鼓舞的野心文."野心是世界的驱动力的最好的结果几乎所有的工作. " 心野心是要留下点什么在自己身后的永恒价值 在这个 ...

  2. ASP.NET自定义控件组件开发 第一章 待续

    原文:ASP.NET自定义控件组件开发 第一章 待续 第一章:从一个简单的控件谈起 系列文章链接: ASP.NET自定义控件组件开发 第一章 待续 ASP.NET自定义控件组件开发 第一章 第二篇 接 ...

  3. Android Studio如何引用jar包裹（不gradle）

    这和eclipse最大的区别.与非常人的预期开始Android Studio我们很不高兴这一套. 它直接在地图上.首先通过File->Projcet structure打开project结构界面 ...

  4. BibTex （.bib） 文件的凝视

    1) 将某个參考文献所有去掉,能够去掉前面的『@』 样例 @article{##,    author = {###},    title = {###},    journal = {###},   ...

  5. 接近带给你AngularJS - 经验说明示例

    接近带给你AngularJS列: 带你走近AngularJS - 基本功能介绍 带你走近AngularJS - 体验指令实例 带你走近AngularJS - 创建自己定义指令 ------------ ...

  6. Android技术——切换视图（两）随着ViewPage达到Tab幻灯片浏览

    Android技术--切换视图(一)~(四)在资源项目:https://github.com/YongYuIT/MeiNv_Liulanqi 一.早期android(android.support.v ...

  7. php方法综述除去换行符(PHP_EOL使用变量)

    一个小包裹,事实上,不同的平台具有不同的实现.为什么要这样.它可以是一个世界是多样的. 最初unix与世界把它包/n取代,但windows为了体现自己的不同.要使用/r/n,更有意思的是,mac随着/ ...

  8. Swift 书面 ToDo App

    下面的代码是使用的全部Xcode Version 6.0.1 (6A317)书面. 因为当使用团队开发stroyboard在并购的诸多不便的时间,所有或使用.xib该文件准备ToDo App. 想要实 ...

  9. jquery经常使用事件（整理）

    Jquery事件 (一).事件列表. 1.blur() 当失去焦点时触发.包含鼠标点击离开和TAB键离开. 2.change() 当元素获取焦点后,值改变失去焦点事触发. 3.click() 当鼠标单 ...

  10. POJ3090_Visible Lattice Points【欧拉函数】

    Visible Lattice Points Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 5653 Accepted: 333 ...