高德2.0

按 NPM 方式使用 Loader

安装：

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

引入:

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

AMapLoader.load({
    "key": "",              // 申请好的Web端开发者Key，首次调用 load 时必填
    "version": "1.4.15",   // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    "plugins": []           // 需要使用的的插件列表，如比例尺'AMap.Scale'等
    "AMapUI": {             // 是否加载 AMapUI，缺省不加载
        "version": '1.1',   // AMapUI 缺省 1.1
        "plugins":[],       // 需要加载的 AMapUI ui插件
    },
    "Loca":{                // 是否加载 Loca， 缺省不加载
        "version": '1.3.2'  // Loca 版本，缺省 1.3.2
    },
}).then((AMap)=>{
    map = new AMap.Map('container');
}).catch(e => {
    console.log(e);
})

在vue中引入：

<template lang="">
  <div>
    <div id="mymap" style="height:500px;width:100%"></div>
  </div>
</template>
<script>
import AMapLoader from "@amap/amap-jsapi-loader";
var marker,
  lineArr = [
    [116.478935, 39.997761],
    [116.478939, 39.997825],
    [116.478912, 39.998549],
    [116.478912, 39.998549],
    [116.478998, 39.998555],
    [116.478998, 39.998555],
    [116.479282, 39.99856],
    [116.479658, 39.998528],
    [116.480151, 39.998453],
    [116.480784, 39.998302],
    [116.480784, 39.998302],
    [116.481149, 39.998184],
    [116.481573, 39.997997],
    [116.481863, 39.997846],
    [116.482072, 39.997718],
    [116.482362, 39.997718],
    [116.483633, 39.998935],
    [116.48367, 39.998968],
    [116.484648, 39.999861],
  ];
export default {
  name: "Home",
  components: {},
  props: ["linePosition"], // 传入经纬度 [[],[]]
  data() {
    return {
      map: null,
    };
  },
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      let that = this;
      AMapLoader.load({
        key: "1550bd9a0bd1bb4XXXXXXXX", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ["AMap.Driving"], //插件列表
      })
        .then((AMap) => {
          let map = new AMap.Map("mymap");
          map.setMapStyle("amap://styles/light"); // 设置地图样式(自定义地图)
          // 绘制轨迹
          // var polyline = new AMap.Polyline({
          //   map: map,
          //   path: lineArr,
          //   showDir: true,
          //   strokeColor: "#0080ff", //线颜色
          //   // strokeOpacity: 1,     //线透明度
          //   strokeWeight: 6, //线宽
          //   // strokeStyle: "solid"  //线样式
          // });

          //构造路线导航类
          var driving = new AMap.Driving({
            map: map,
          });
          // 根据起终点经纬度规划驾车导航路线
          driving.search(
            new AMap.LngLat(that.linePosition[0][0], that.linePosition[0][1]),
            new AMap.LngLat(
              that.linePosition[that.linePosition.length - 1][0],
              that.linePosition[that.linePosition.length - 1][1]
            ),
            function (status, result) {
              // result 即是对应的驾车导航信息，相关数据结构文档请参考  https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
              if (status === "complete") {
                console.log("绘制驾车路线完成");
              } else {
                console.log("获取驾车数据失败：" + result);
              }
            }
          );
          map.setFitView();
          //   map.setStatus({
          //     dragEnable: false, // 地图是否可通过鼠标拖拽平移，默认为true
          //     keyboardEnable: false, //地图是否可通过键盘控制，默认为true
          //     doubleClickZoom: false, // 地图是否可通过双击鼠标放大地图，默认为true
          //     zoomEnable: false //地图是否可缩放，默认值为true
          //   });
          this.map = map;
        })
        .catch((e) => {
          console.log(e);
        });
    },
  },
};
</script>
<style lang="scss" scoped>
#container {
  width: 100%;
  height: 100%;
}
</style>

key值 采用web端（jsapi）