zoukankan      html  css  js  c++  java
  • 【百度地图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="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>

    ---------------------------------------------------------------------------------------------------------------------------------

    即日起至2016/10/31止,凡注册成为高德开发者的新用户,即可获赠1张阿里云优惠券,可享受最低6折购买阿里云产品。数量有限,发完即止。详情点击:http://lbsbbs.amap.com/forum.php?mod=viewthread&tid=20143

    ---------------------------------------------------------------------------------------------------------------------------------

  • 相关阅读:
    UML 类图基础知识记录
    装饰器模式
    Hive 安装配置记录
    HBase 建表新增数据记录
    HBase 安装过程记录
    lucene 索引参数配置类IndexWriterConfig记录
    lucene 专业名词作用整理
    socket、webService、RMI ?
    Lucene 对文档打分的规则整理记录
    lucene 检索流程整理笔记
  • 原文地址:https://www.cnblogs.com/milkmap/p/2365064.html
Copyright © 2011-2022 走看看