高德地图api实现导航功能（使用经验）避坑关注

关于导航功能的实现实际上就是使用市面上开放的地图api，按照操作文档进行开发实现功能的。

业内流行的无非是两种，一种高德地图api，另一种是百度地图api，博主这里选用了高德地图api,进行避坑讲解。只要会其中一种api，另一种也不攻自破了。

当然这篇文章也是用来记录，我在真实开发环境中，遇到的任务。

这里结合我的任务需求，来讲解api的使用。

1.任务描述及思路分析

任务描述：在原有的周边资源的marker标记点上，实现点击标记点，导航到固定的一个终点。

思路分析：这里通过看高德api大概的功能实现是有的，只不过因为有了具体业务，所以当然不能照搬过来就使用。这里的业务是基于周边资源上完成路径规划。

思路步骤：

1. 在周边资源的代码中，给资源marker标记点添加点击事件
2. 在点击事件中，可以得到对应marker的坐标点。
3. 通过坐标点可以实现起点到对应已知终点的导航

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使用过程中遇到障碍了，欢迎评论区留言，我看到会回复的。