实现百度地图选点寻址(根据经纬度而非名称)

目标; 假定给某一目标点 比如 成都天府广场,用户点击地图上某点,实现给出路径;
开发环境:
百度地图api+html+js

实现步骤:

  1. 新建地图 展示天府广场的位置 标记点(目的点)
  2. 添加事件监听 用户点击地图 添加标记点 就是出发点
  3. 规划出发点到目的点路线 并显示

注意: 点击下一个出发点时要清理之前的显示路径和点

代码:

检索的核心是; 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
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容