高德地图Vue2地图的踩坑指南

学习目标：用高德地图实现货车路线的规划与修正

技术环境：Vue2

---

问题：

1. 高德开放平台全是非Vue的案例，拿过来基本要修修改改很多
2. AMapLoader.load的问题
3. _AMapSecurityConfig.securityJsCode的问题
4. 关于路径规划获取值的问题

---

问题解决：

1. 这个问题建议直接拷贝我下面的代码。或者说直接去XXX论坛或者XXXhub拿已经写好的代码修改，自己0基础琢磨，太累了
2. AMapLoader.load。是高德开放平台难得给Vue开发者的一个模板，我把链接发到下面来

链接到高德开放平台官方文档

拿到这个代码，你会发现有些问题，你无法获取到这个map，请看下图

那要怎么办？
只能把这个AMapLoader.load提升作用域，提到main.js中去，使Amap这个东西变成全局。

这样配置后，在组件中你就能够直接使用Amap来newMap，拿得到map。

如果不做这一步，你用官方的案例，只能够在AMapLoader.load这里面去使用这一张map。

3. _AMapSecurityConfig.securityJsCode的问题

   我先说为什么，我为什么会遇到这个问题？
   我是需要一张地图，然后选择两个点(起点与终点)，使用高德地图的API进行路径规划，所以需要调高德的API。
   其次这个问题是什么？我要调路径规划API，这个东西是任何一款地图的核心东西，所以需要密钥对不对？
   
   所以在这里我就把密钥加了上去，然后在这里我遇到一个增加节点错误的问题，其实这个问题应该要从INVALID_USER_SCODE这个问题配置出来的问题，所以首先遇到的问题是它。
   我遇到的问题的解决方法是重新整理了main.js里面的AMapLoader.load。我解决之前百思不得其解为什么会报错？我换了一种思路，我选择AMapLoader.load这种方法初始化地图，那么肯定是第一步，第二步才是拿密钥，那我有可能是第一步AMapLoader.load有问题，所以第二步才会报错，顺着这个思路回去重新配置，发现成功了。
   4. 关于路径规划获取值的问题
   最后一个问题，我也解决了很久，其实简单来说，看下面代码就知道了。
   
   
   

---

学习产出：

这四个问题解决完毕后，团队给我的任务也就结束了，我也对高德地图API有了更深入的认识，下面就把相应代码push。

test3Map.vue

<template>
  <div class="home_div">
    <div class="map_title">
      <h3>JSAPI Vue2地图组件示例</h3>
      <button @click="getWays()">get点</button>
    </div>
    <div id="container"></div>
  </div>
</template>
<script>
// 添加高德安全密钥
window._AMapSecurityConfig = {
  securityJsCode: "你的密钥",
};
import AMapLoader from "@amap/amap-jsapi-loader";

export default {
  name: "Mapview",
  data() {
    return {
      map: null,
      route: null,
      StartAndEndPoint: [
        {
          longitude: 106.08571608279036,
          latitude: 30.806691567259012,
        },
        {
          longitude: 106.07022632572935,
          latitude: 30.81434431852898,
        },
      ],
    };
  },
  created() {},
  mounted() {
    this.initAMap();
    this.PlanningPath();
  },
  methods: {
    initAMap() {
      let that = this;
      this.map = new AMap.Map("container", {
        viewMode: "2D",
        zoom: 15,
        zooms: [2, 22],
        center: [106.08571608279036, 30.806691567259012],
      });
    },
    initStartAndEndPoint() {
      // 创建一个起点实例：
      // 创建一个起点Icon
      let startIcon = new AMap.Icon({
        // 图标尺寸
        size: new AMap.Size(25, 34),
        // 图标的取图地址
        image:
          "//a.amap.com/jsapi_demos/static/demo-center/icons/dir-marker.png",
        // 图标所用图片大小
        imageSize: new AMap.Size(135, 40),
        // 图标取图偏移量
        imageOffset: new AMap.Pixel(-9, -3),
      });

      const Start = new AMap.Marker({
        position: new AMap.LngLat(
          this.StartAndEndPoint[0].longitude,
          this.StartAndEndPoint[0].latitude
        ), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
        // 图标的取图地址
        title: "起点",
        icon: startIcon,
      });

      // 创建一个终点Icon
      let endIcon = new AMap.Icon({
        size: new AMap.Size(25, 34),
        image:
          "//a.amap.com/jsapi_demos/static/demo-center/icons/dir-marker.png",
        imageSize: new AMap.Size(135, 40),
        imageOffset: new AMap.Pixel(-95, -3),
      });

      const End = new AMap.Marker({
        position: new AMap.LngLat(
          this.StartAndEndPoint[1].longitude,
          this.StartAndEndPoint[1].latitude
        ), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
        title: "终点",
        icon: endIcon,
      });

      // 将创建的点标记添加到已有的地图实例：
      this.map.add(Start);
      this.map.add(End);
    },
    PlanningPath() {
      let that = this;
      let path = [];
      //规划路径点线的配置
      let Options = {
        polyOptions:{
          lineJoin:'round',
          lineCap:'round'
        },
        startMarkerOptions:{
          size:new AMap.Size(135, 40),
          content:'',
          anchor:'top-center',
          offset:new AMap.Pixel(0, 0),
          visible:true,
          clickable:false
        },
        midMarkerOptions:{
          size:new AMap.Size(135, 40),
          content:'',
          anchor:'top-center',
          offset:new AMap.Pixel(-15, -15),
          visible:true,
          clickable:false
        },
        endMarkerOptions:{
          size:new AMap.Size(135, 40),
          content:'',
          anchor:'top-center',
          offset:new AMap.Pixel(0, 0),
          visible:true,
          clickable:false
        }
      }
      path.push(new AMap.LngLat(that.StartAndEndPoint[0].longitude,that.StartAndEndPoint[0].latitude));
      path.push(new AMap.LngLat(that.StartAndEndPoint[1].longitude,that.StartAndEndPoint[1].latitude));
      that.route = new AMap.DragRoute(this.map,path,AMap.DrivingPolicy.REAL_TRAFFIC,Options);
      that.route.search();
    },
    getWays(){
      console.log(this.route.getWays());
      
    }
  },
};
</script>
<style scoped>
.home_div {
  padding: 0px;
  margin: 0px;
  width: 80vw;
  height: 80vh;
  position: relative;
}
#container {
  padding: 0px;
  margin: 0px;
  width: 100%;
  height: 100%;
  position: absolute;
}
.map_title {
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 50px;
  background-color: rgba(27, 25, 27, 0.884);
}
h3 {
  position: absolute;
  left: 10px;
  z-index: 2;
  color: white;
}
</style>

Main.js

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import AMapLoader from "@amap/amap-jsapi-loader";
import '@vuemap/vue-amap/dist/style.css';

AMapLoader.load({
  key: "你的key", //设置您的key
  version: "2.0",
  plugins: ["AMap.ToolBar", "AMap.Driving", "AMap.DragRoute"],
  AMapUI: {
    version: "1.1",
    plugins: [],
  },
  Loca: {
    version: "2.0",
  },         // 需要使用的的插件列表，如比例尺'AMap.Scale'等，更多插件请看官方文档
}).then((AMap) => {
  createApp(App).use(AMap).mount('#app')
})

结语：

大概就是这个样子，如果遇到了报错，那就自己解决吧，我相信遇到这种问题的前端工程师都不是普通小白(当然排除我，我是垃圾)，我写的代码很垃圾，我的信念是能跑就行。

高德开放平台链接

高德开放平台JS API链接