Vue-Cli 3.0 中使用高德地图

1,475 阅读1分钟

1、引用高德地图 SDK

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

 <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.4&key=你申请的key"></script> 
 
 这个key需要注册申请的,具体的案例还是比较多的。

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

 module.exports = {
    devServer: {
        port: 57103 // 端口号配置
    },
    configureWebpack: {
        externals: {
          'AMap': 'AMap' // 高德地图配置
        }
    }
}

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

(4)在使用的vue文件当中,需要import AMap

 import AMap from 'AMap'

直接使用即可

 init () {
  let map = new AMap.Map('container', {
    center: [116.397428, 39.90923],
    resizeEnable: true,
    zoom: 10
  })
}