百度API获取路径上经纬度点的HTML程序
时间: 2024-03-03 21:50:21 浏览: 32
以下是一个获取路径上经纬度点的百度API HTML程序,你可以尝试将其中的ak参数替换为自己的百度API密钥,并替换掉path参数为你想要获取经纬度点的路径。
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>百度地图API获取路径上经纬度点</title>
<script src="http://api.map.baidu.com/api?v=2.0&ak=你的AK"></script>
</head>
<body>
<div id="map" style="width: 100%; height: 500px;"></div>
<script>
var map = new BMap.Map("map");
var path = "39.915,116.404;39.990,116.472;40.015,116.500;40.070,116.532";
var points = [];
var pathArr = path.split(";");
for (var i = 0; i < pathArr.length; i++) {
var pointArr = pathArr[i].split(",");
var point = new BMap.Point(pointArr[1], pointArr[0]);
points.push(point);
}
var polyline = new BMap.Polyline(points, { strokeColor: "blue", strokeWeight: 3, strokeOpacity: 0.5 });
map.addOverlay(polyline);
map.setViewport(points);
var markers = [];
for (var i = 0; i < points.length; i++) {
var marker = new BMap.Marker(points[i]);
markers.push(marker);
map.addOverlay(marker);
}
var markerClusterer = new BMapLib.MarkerClusterer(map, { markers: markers });
</script>
</body>
</html>
```
在这个程序中,我们使用了百度地图API的Polyline、Point、Marker和MarkerClusterer等类来绘制路径和标注经纬度点。具体来说,我们首先将路径字符串按分号分隔成多个点,然后将每个点的经纬度字符串按逗号分隔,得到经度和纬度值,最后将它们转化为BMap.Point对象,并添加到points数组中。接着,我们使用Polyline类将所有点连接起来,形成路径,并使用Marker类在每个点上标注出经纬度。最后,我们使用MarkerClusterer类将所有Marker进行聚合,以提高地图的可视化效果。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)