原文:【百度地图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】自行获取区域经纬度的工具的更多相关文章

  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. unity简易小地图的实现（NGUI）

    首先,我们在场景中添加一个摄像机叫做minimapCamera, 把上面的Audio Listener组件去掉,调整摄像机位置,将其置于角色正上方,如图 新建一个Texture我们叫做minimapT ...

  2. 如何知道 win10 的激活到期时间和期限等

    在“运行”里输入cmd,出来dos对话框后,输入下面的东西后,按Enterslmgr.vbs -dli (显示:操作系统版本.部分产品密钥.许可证状态)slmgr.vbs -dlv (显示:最为详尽的 ...

  3. Linux鸟哥的私房菜（3）— 总体规划和磁盘分区 读书笔记

    1.每个硬件设备Linux中的文件名称 在Linux系统中.每一个设备都被当成一个文件来对待.而且差点儿全部的硬件设备文件都在/dev文件夹下 常见设备与其对于文件名称 2.磁盘连接的方式与设备文件名 ...

  4. codeigniter 该脚本在运行300s超时退

    直接看代码, file:system/core/CodeIgniter.php /* 102  * -------------------------------------------------- ...

  5. 避免内存重叠memmove（）性能

    #include <iostream> #include <string.h> using namespace std; void* memmove(void *dst, co ...

  6. P/Invoke与逆向P/Invoke

    1.在在 C# 中通过 P/Invoke 调用Win32 DLL这篇文中,详细介绍了P/Invoke的基本知识以及使用. 2.InAttribute和OutAttribute特性与C#中ref和out ...

  7. Linux通过使用Sambaserver示例

    Linux通过使用Sambaserver示例 实验环境: Vbox下一个.Rehat5虚拟机 使用sambaserver 目的:使用sambaserver将文件上传到server上 [root@rh5 ...

  8. POSIX 螺纹具体解释（1-概要）

    线程是有趣的 线程类似于进程.如同进程,线程由内核按时间分片进行管理.在单处理器系统中,内核使用时间分片来模拟线程的并发运行.这样的方式和进程的同样. 而在多处理器系统中,如同多个进程.线程实际上一样 ...

  9. Flux demo

    Flux demo Introduction flux应用架构如下图所示,本文并不是讲述怎么立即做一个酷炫的应用,而是讲述如何依照这种框架,来进行代码的组织.我们先把这个流程转述为文字:抛开与webA ...

  10. hdu4288 Coder 2012成都网络赛 A题

    题意:往集合里面添加删除数,集合中的数是按从小到大排列的,询问下标模5等于3的数的和. 记得当时这题不会做, 现在想简单多了,只要维护五个值和左右子树的size大小就行了. #define maxn ...