百度地图api文档实现任意两点之间的最短路线规划
两个点之间的路线是使用“Marker”点连接起来的，目前还没找到改变点颜色的方法，测试过使用setStyle没有效果。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<style type="text/css">
body, html, #allmap {
width: 100%;
height: 100%;
overflow: hidden;
margin: 0;
font-family: "微软雅黑";
}
.anchorBL {
display: none;
}
</style>
<script type="text/javascript"
src="http://api.map.baidu.com/api?v=2.0&ak=dpB1d25b7smGMe8evaIAxw881Aq3AUfb"></script>
<title></title>
</head>
<body>
<div id="allmap"></div>
<script type="text/javascript">
// 百度地图API功能
var map = new BMap.Map("allmap");
map.centerAndZoom("重庆", 14);
var walking = new BMap.WalkingRoute(map, {
renderOptions: {
map: map,
autoViewport: true
}
});
map.enableScrollWheelZoom(); //启用滚轮放大缩小，默认禁用
map.enableContinuousZoom(); //启用地图惯性拖拽，默认禁用
//路况
var traffic = new BMap.TrafficLayer(); // 创建交通流量图层实例
map.addTileLayer(traffic); // 将图层添加到地图上
//浏览器定位
/*var geolocation = new BMap.Geolocation();
geolocation.getCurrentPosition(function(r){
if(this.getStatus() == BMAP_STATUS_SUCCESS){
var mk = new BMap.Marker(r.point);
map.addOverlay(mk);
map.panTo(r.point);
alert('您的位置：'+r.point.lng+','+r.point.lat);
}
else {
alert('failed'+this.getStatus());
}
});
*/
var myIcon = new BMap.Icon("../images/marker_MAN.png", new BMap.Size(20, 26));
var _points = [];
map.addEventListener("click", function (e) {
var _point = {
lng: "",
lat: ""
};
_point.lng = e.point.lng;
_point.lat = e.point.lat;
_points.push(_point);
map.addOverlay(new BMap.Marker(new BMap.Point(e.point.lng, e.point.lat), {icon: myIcon}));
console.log(_points);
// alert(e.point.lng + "," + e.point.lat);
if (_points.length === 2) {
var start = new BMap.Point(_points[0].lng, _points[0].lat);
var end = new BMap.Point(_points[1].lng, _points[1].lat);
walking.search(start, end);
map.clearOverlays();
_points = [];
}
});
</script>
</body>
</html>
本文来自博客园，作者：小虾米吖~，转载请注明原文链接：https://www.cnblogs.com/LindaBlog/p/10455517.html
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
· 浏览器原生「磁吸」效果！Anchor Positioning 锚点定位神器解析
· 没有源码，如何修改代码逻辑？
· 全程不用写代码，我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」