高德地图api实现导航功能（使用经验）避坑关注 |
您所在的位置：网站首页 › 高德道路导航 › 高德地图api实现导航功能（使用经验）避坑关注 |
高德地图api实现导航功能（使用经验）避坑关注
|
关于导航功能的实现实际上就是使用市面上开放的地图api，按照操作文档进行开发实现功能的。 业内流行的无非是两种，一种高德地图api，另一种是百度地图api，博主这里选用了高德地图api,进行避坑讲解。只要会其中一种api，另一种也不攻自破了。 当然这篇文章也是用来记录，我在真实开发环境中，遇到的任务。 这里结合我的任务需求，来讲解api的使用。 1.任务描述及思路分析任务描述：在原有的周边资源的marker标记点上，实现点击标记点，导航到固定的一个终点。 思路分析：这里通过看高德api大概的功能实现是有的，只不过因为有了具体业务，所以当然不能照搬过来就使用。这里的业务是基于周边资源上完成路径规划。 思路步骤： 在周边资源的代码中，给资源marker标记点添加点击事件在点击事件中，可以得到对应marker的坐标点。通过坐标点可以实现起点到对应已知终点的导航 2.代码实现步骤1.环境准备 高德api环境选择
这里分为Web端，Android,IOS 博主用的是web端 JS API 进行的web开发 2.寻找对应匹配的api 高德api
左边对应的是功能，右边的是代码实现 这里我用的驾车路线绘制 3.代码解析 实际应用的时候，需要注意 这个key是需要自己去高德api主页去申请的, 按照提示一步步来就行
左边的是初始坐标（起点） 右边是终点坐标 4.将导航功能嵌入到自己的marker点击事件当中 AMap.service(["AMap.PlaceSearch"], function() { globalPlaceSearch = new AMap.PlaceSearch({ type: '', // 兴趣点类别 // pageSize: 5, // 单页显示结果条数 // pageIndex: 1, // 页码 // city: "010", // 兴趣点城市 // citylimit: true, //是否强制限制在设置的城市内搜索 map: map, // 展现结果的地图实例 panel: "panel", // 结果列表将在此容器中进行展示。 autoFitView: false // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围 }); AMap.event.addListener(globalPlaceSearch, 'markerClick', function (e) { markpointLat=e.data.location.lat; markpointLng=e.data.location.lng; Navigation(); }) globalPlaceSearch.searchNearBy(searchType, unitMapPoint, 2000, function(status, result) { }); });核心代码在这里
拿到了对应的marker坐标点后 我调用了封装的导航方法Navigation() function Navigation() { $("#panel").show(); $("#panel").empty(); if(driving){ driving.clear(); if(driving.render){ driving.render.markerList.clear(); } } //构造路线导航类 driving = new AMap.Driving({ map: map, panel: "panel" }); // 根据起终点经纬度规划驾车导航路线 driving.search(new AMap.LngLat(markpointLng,markpointLat), new AMap.LngLat(CenterpointLng, CenterpointLat), function(status, result) { // result 即是对应的驾车导航信息，相关数据结构文档请参考 https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult if (status === 'complete') { } else { layer.msg('获取驾车数据失败', { icon: 0, time: 4000, shade: [0.6, '#000', true] }); } }); }大家如果关于高德地图api使用过程中遇到障碍了，欢迎评论区留言，我看到会回复的。 |
【本文地址】