目标; 假定给某一目标点 比如 成都天府广场,用户点击地图上某点,实现给出路径;
开发环境:
百度地图api+html+js
实现步骤:
- 新建地图 展示天府广场的位置 标记点(目的点)
- 添加事件监听 用户点击地图 添加标记点 就是出发点
- 规划出发点到目的点路线 并显示
注意: 点击下一个出发点时要清理之前的显示路径和点
代码:
检索的核心是; DrivingRoute驾车导航类和search检索方法 进一步请查看百度地图开发文档。
若要步行规划 改为
var walking = new BMapGL.WalkingRoute(map, {renderOptions:{map: map, autoViewport: true}});
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>地图导航</title>
<style type="text/css">
html{height:100%}
body{height:100%;margin:0px;padding:0px}
#container{height:100%}
</style>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=你自己申请的百度地图应用密钥">
</script>
</head>
<body>
<!--目标: 以某个地点为中心 创建地图 展示 ;同时用信息窗口 展示该地点的简介 是静态固定的一个点 -->
<div id="container"></div>
<script type="text/javascript">
var map = new BMapGL.Map("container");
var point = new BMapGL.Point(104.0719, 30.6636);
map.centerAndZoom(point, 17);
map.enableScrollWheelZoom(true)
//添加事件3 点击 就生成点 并标记点
map.addEventListener("click",function(e){
var p2 = new BMapGL.Point(e.latlng.lng,e.latlng.lat);
var marker=new BMapGL.Marker(p2);
map.clearOverlays();//重新选点 要清除之前的路线 否则过去的都显示了
map.addOverlay(marker);
var driving = new BMapGL.DrivingRoute(map, {renderOptions:{map: map, autoViewport: true}});
driving.search(p2,point);
});
</script>
</body>
</html>
效果图:
image.png
image.png