vue项目使用高德地图时报错：AMap is not defined

场景：最近在使用高德地图做轨迹回放的时候，遇到一个BUG，提示：AMap is not defined，大概就是没找到你定义的AMap

网上找了很久，比如什么js加载顺序问题

还有说要设置

统统试了，都没用！！！

解决办法：

既然说加载顺序的问题，那就在初始化的时候，给加个延迟吧

** 结果发现好了！！！**

** 我这种投机取巧的方式也许没有彻底解决问题，目前没找到更好的办法，希望各位大神指点指点**

下面是整个页面的完整代码

<template>
    <div>
        <div id="container"></div>
        <div class="input-card">
          <h4>轨迹回放控制</h4>
          <div class="input-item">
            <input type="button" class="btn" value="开始动画" id="start" @click="startAnimation()" />
            <input type="button" class="btn" value="暂停动画" id="pause" @click="pauseAnimation()" />
          </div>
          <div class="input-item">
            <input type="button" class="btn" value="继续动画" id="resume" @click="resumeAnimation()" />
            <input type="button" class="btn" value="停止动画" id="stop" @click="stopAnimation()" />
          </div>
        </div>
      </div>
</template>
 
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=你自己的key"></script>
<script>
    //请求路径
    //import {
        //playbacklist,
    //} from "@/api/obd/playback";
 
    export default {
        mounted() {
          this.initMap();
        },
        beforeDestroy() {
          
        if (this.timer) {
          clearInterval(this.timer);
          this.timer = null;
          this.map && this.map.destroy();
        }
        },
        data() {
          return {
            map: null,
            marker: null,
            lineArr: [
              [118.478939, 39.997768],
              [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]
            ]
          };
        },
        methods: {
          initMap() {
            setTimeout(()=>{
                var that = this
                that.map = new AMap.Map("container", {
                    resizeEnable: true,
                    center: [108.478939, 39.997768],
                    zoom: 17
                });
            
    
                that.marker = new AMap.Marker({
              map: that.map,
              position: [118.478939, 39.997768],
              icon: "https://webapi.amap.com/images/car.png",
              offset: new AMap.Pixel(-26, -15),
              autoRotation: true,
              angle: -90
            });
    
            // 绘制轨迹
            var polyline = new AMap.Polyline({
              map: that.map,
              path: that.lineArr,
              showDir: true,
              strokeColor: "#28F", //线颜色
              // strokeOpacity: 1,     //线透明度
              strokeWeight: 6 //线宽
              // strokeStyle: "solid"  //线样式
            });
    
            var passedPolyline = new AMap.Polyline({
              map: that.map,
              // path: this.lineArr,
              strokeColor: "#AF5", //线颜色
              // strokeOpacity: 1,     //线透明度
              strokeWeight: 6 //线宽
              // strokeStyle: "solid"  //线样式
            });
            this.marker.on("moving", function (e) {
              passedPolyline.setPath(e.passedPath);
            });
    
            this.map.setFitView();
            },800)
    
          },
          startAnimation() {
            this.marker.moveAlong(this.lineArr, 200);
          },
          pauseAnimation() {
            this.marker.pauseMove();
          },
          resumeAnimation() {
            this.marker.resumeMove();
          },
          stopAnimation() {
            this.marker.stopMove();
          }
        }
      };
</script>
 
<style scoped>
    
      #container {
        height: 1000px;
        width: 100%;
      }
    
      .input-card .btn {
        margin-right: 1.2rem;
        width: 9rem;
      }
    
      .input-card .btn:last-child {
        margin-right: 0;
      }
      
      .btn {
        display: inline-block;
        font-weight: 400;
        text-align: center;
        white-space: nowrap;
        vertical-align: middle;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        border: 1px solid transparent;
        transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
        background-color: transparent;
        background-image: none;
        color: #25A5F7;
        border-color: #25A5F7;
        padding: .25rem .5rem;
        line-height: 1.5;
        border-radius: 1rem;
        cursor:pointer;
      }
      
      .input-item {
        position: relative;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -ms-flex-align: center;
        align-items: center;
        width: 100%;
        height: 3rem;
      }
      
      .input-card {
        display: flex;
        flex-direction: column;
        min-width: 0;
        word-wrap: break-word;
        background-color: #fff;
        background-clip: border-box;
        border-radius: .25rem;
        width: 22rem;
        border-width: 0;
        border-radius: 0.4rem;
        box-shadow: 0 2px 6px 0 rgba(114, 124, 245, .5);
        position: fixed;
        bottom: 1rem;
        right: 1rem;
        -ms-flex: 1 1 auto;
        flex: 1 1 auto;
        padding: 0.75rem 1.25rem;
      }
</style>