vue加载高德地图（原生）

1. 在 public 文件夹下的 index.html 中加入

///<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.14&key=你申请的key"></script>

2. 在 vue.config.js 文件中配置 externals

///module.exports = {

  devServer: {

    port: 57103 // 端口号配置

  },

  configureWebpack: {

    externals: {

      'AMap': 'AMap' // 高德地图配置

    } }}

注： vue.config.js 文件要自己创建，vue-cli 3.0 不会自动生成此文件。 此外，修改 vue.config.js 不会触发热加载，也就是修改之后你需要重新 run 一下你的项目，它才能生效。

3.加载地图

加载地图

地图容器要给他一个宽高。

注：init() 方法请在 mounted 生命周期中调用，因为如果在 created 阶段调用，会找不到 html 元素 div#container

注2:若中途遇到 'map' is assigned a value but never used

可找到package.json中找到rules:{} 添加 "no-unused-vars":0

最终效果

仅底图效果

高德API：https://developer.amap.com/api/javascript-api/guide/map/map-style