VUE调用高德地图之轨迹回放

高德地图调用方法

VUE调用高德地图通常有三种方式：

1. 饿了么提供的地图组件：vue-amap
2. @Jim Liu提供的地图组件：@amap/amap-vue（参考文章：为你的Vue项目加上高德地图）
3. 高德官方的 JS API

在写成本文之前，本人尝试过上面全部的三种方法。但因水平有限，VUE只是初窥门径，使用vue-amap时总是报'AMap' not defined错误，F5刷新后地图就无法显示。使用@amap/amap-vue则一切顺利，非常好用，但后续开发需要的热力图功能不知如何实现，所以最终决定采用官方的JS API。

使用 JS API 调用高德地图

加载 JS API

• 在public/index.html中加入：

• 在vue.config.js中加入configureWebpack节点（实测不加也无妨，学艺不精，不知其中缘由）：

module.exports = {
    // ...
    configureWebpack: {
        externals: {
            'AMap': 'AMap' // 高德地图JS API
        }
    },
}

将官方demo转换为vue代码

• 放置地图
  
• 初始化map对象
  
• 放置汽车标记
  
• 绘制轨迹
  
  完整代码如下：

启动项目，一切正常！