博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
调用百度地图实例
阅读量:4187 次
发布时间:2019-05-26

本文共 1853 字,大约阅读时间需要 6 分钟。

1、简介

    在项目中需要获得某些区域的经纬度,通过百度地图的API可以很容易的得到这些数值。方法如下:

     将一下内容保存为html文件即可。

<!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" οnclick="startTool();" value="开启取点工具" /><input type="button" οnclick="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>

转载地址:http://pgdoi.baihongyu.com/

你可能感兴趣的文章
verilog 基础原理1 - RTL中对数据位宽的管理
查看>>
Cadence IUS 之二: 生成波形
查看>>
DDR3基本概念2 - 上电复位时序
查看>>
DDR3基本概念3 - 复位初始化实战举例Lattice DDR3 IP仿真
查看>>
Lattice clarity designer在linux平台下无法找到已安装的IP的解决办法
查看>>
DDR3基本概念4 - 预充电和刷新,以及Lattice DDR3 SDRAM controller实战注意事项
查看>>
DDR3基本概念5 - DDR仿真中出现的Memory overflow错误的处理
查看>>
DDR3基本概念6 - Write leveling(写入均衡)
查看>>
DDR3基本概念7 - 写操作,以及Lattice DDR3 SDRAM controller实战
查看>>
verilog 基础原理1 - Testbench的initial中的时间节点的判断
查看>>
Cadence IUS 之三:代码覆盖率分析
查看>>
Lattice FPGA 使用指南3 - 如何用第三方仿真工具跑后仿及波形分析
查看>>
Cadence IUS 之四:生成verdi的fsdb波形时的问题分析
查看>>
Lattice FPGA 使用指南4 - 全局复位网络GSR的使用
查看>>
DDR3基本概念8 - 如何理解RTT和VTT
查看>>
DDR3基本概念9 - 8n pre-fetch architecture的含义
查看>>
DDR3基本概念10 - DDR MT/S的理解
查看>>
git命令缩写配置
查看>>
makefile常见问题
查看>>
ncverilog编译时Unrecognized system task or function: $fsdbDumpfile问题的解决方法
查看>>