高德地图在vue中实现，路线规划实现

1.引入方式：

npm i @amap/amap-jsapi-loader --save

2.创建地图组件

 3. 代码构成

template：

<template>
  <div class="mapComponents" id="container"></div>
</template>

script：

（1）引入AMapLoader

import AMapLoader from "@amap/amap-jsapi-loader";

（2）添加高德安全密钥（如果不加的话，路线规划功能会获取失败），安全密钥是和key一起申请的

window._AMapSecurityConfig = {
  securityJsCode: "您的安全密钥",
};

（3）data：

data() {
    return {
      map: null,
    };
  },

（4）mounted：

this.initAMap();

（5）unmounted：

this.map.destroy();

（6）methods：

initAMap() {
      AMapLoader.load({
        key: "您的key", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      })
        .then((AMap) => {
          this.map = new AMap.Map("container", {
            // 设置地图容器id
            viewMode: "3D", // 是否为3D地图模式
            zoom: 14, // 初始化地图级别
            center: [121.475186, 31.228725],//地图显示中心点坐标
          });
        })
        .catch((e) => {
          console.log(e);
        });
    },

完成以上步骤，就可以实现地图的显示了

 路线规划功能的实现还需要用到：AMap.Driving

先看效果图：

 我们需要在vue异步引入这个插件，上代码：（这块用的是根据经纬度设置起点终点的），官方链接：位置经纬度 + 驾车规划路线-驾车路线规划-示例中心-JS API 示例 | 高德地图API (amap.com)

这块代码需要放到这里：

 

  AMap.plugin(
          ["AMap.ToolBar", "AMap.Driving", "AMap.Polyline", "AMap.Marker"],
          function() {
            //异步同时加载多个插件
            var toolbar = new AMap.ToolBar();
            map.addControl(toolbar);
            var driving = new AMap.Driving({
              map: map,
            }); //驾车路线规划
            driving.search(
              new AMap.LngLat(121.378945, 31.264033),
              new AMap.LngLat(121.504128, 31.318716),
              function(status, result) {
                // result 即是对应的驾车导航信息，相关数据结构文档请参考  https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
                if (status === "complete") {
                  console.log("绘制驾车路线完成", result);
                } else {
                  console.log("获取驾车数据失败：" + result);
                }
              }
            );
          }
        );