使用HTML5获取路径上所有点的经纬度程序(使用百度API)
时间: 2024-03-05 20:48:20 浏览: 14
以下是一个使用HTML5和百度API获取路径上所有点的经纬度的示例程序:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>获取路径上所有点的经纬度</title>
<script src="http://api.map.baidu.com/api?v=2.0&ak=你的百度地图API密钥"></script>
</head>
<body>
<div id="map" style="width: 100%; height: 500px;"></div>
<script>
// 创建地图实例
var map = new BMap.Map("map");
// 创建一个点作为地图中心
var point = new BMap.Point(116.404, 39.915);
// 初始化地图,设置中心点坐标和地图级别
map.centerAndZoom(point, 15);
// 启用滚轮缩放
map.enableScrollWheelZoom();
// 添加绘制工具
var overlay = new BMap.DrawingManager(map, {
isOpen: false, // 是否开启绘制模式
drawingMode: BMAP_DRAWING_POLYLINE, // 绘制模式,线段
enableDrawingTool: true, // 是否显示工具栏
polylineOptions: {strokeColor: "#333"} // 线段样式
});
// 添加绘制完成事件
overlay.addEventListener("polylinecomplete", function(e){
var path = e.getPath(); // 获取绘制的线段的路径对象
var points = []; // 定义一个数组,用于存储路径上所有点的经纬度
for(var i = 0; i < path.length; i++){
points.push(path[i]);
}
console.log(points); // 打印路径上所有点的经纬度
});
// 开启绘制模式
overlay.open();
</script>
</body>
</html>
```
在以上示例程序中,我们通过百度地图API创建了一个地图实例,并添加了一个绘制工具。当用户绘制完成一条线段时,我们通过绑定 `polylinecomplete` 事件,获取绘制线段的路径对象,并遍历该对象,将路径上所有点的经纬度存储到一个数组中。最后,我们打印这个数组,即可得到路径上所有点的经纬度信息。