vue使用高德地图

2023-12-19 09:00:03

index.html引入标签

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

vue.config.js(需自己创建，根目录下)

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

使用该功能的组件中引入：

<div id="container" style="width:500px; height:300px"></div>

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