Vue 3.0使用高德地图 vue-amap

这篇文章写一下高德地图的简单应用，本人也是刚入坑，在研究阶段
注册高德开发者账号，申请KEY完成注册

注册完再打开控制台->应用管理->找到“+添加新KEY”->点击会跳出这个弹框：

vue安装vue-amap

npm install vue-amap --save

index.html 引入

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

也可以min.js引入，我是用的index.html里引入

 import VueAMap from 'vue-amap'
// Vue.use(VueAMap)
// VueAMap.initAMapApiLoader({
//   key: '', //高德的key（自己申请）
//   plugin:  ['AMap.Autocomplete', 'AMap.PlaceSearch',
//   'AMap.Scale', 'AMap.OverView',
//   'AMap.ToolBar', 'AMap.MapType',
//   'AMap.PolyEditor', 'AMap.CircleEditor',
//   'AMap.Geolocation'],//引用的插件（根据需要引入）
// uiVersion: '1.0',//UI库 版本
v: '1.4.4', //高德SDK 版本

// })

配置vue.config.js

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

配置完得重启一下
创建组件

<template>
  <div class="box">
    <div id="container" style="width:750px; height:300px"></div>
  </div>
</template>

<script>
import AMap from 'AMap' // 引入高德地图
export default {
  mounted () {
    this.init()
  },
  methods: {
    init () {
     var map = new AMap.Map('container', {
        resizeEnable: true,
        center: [116.397428, 39.90923],
        zoom: 13,
         viewMode:'3D'//使用3D视图
    });
    //实时路况图层
   var marker = new AMap.Marker({
        position:[116.39, 39.9]//位置
    })
    map.add(marker);//添加到地图

    }
     
  }
}
</script>

路由按需加载会报错，搞了我老长时间，完事就可以使用了，别的功能实现去看官网