vue3.0 引入使用高德地图

vue.config.js

configureWebpack: config => {
    config["externals"] = {
      AMap: "AMap" // 高德地图配置
    };
  }

地图组件.vue

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

<script>
import AMap from 'AMap' // 引入高德地图

export default {
  mounted () {
    this.test()
  },
  methods: {
    test () {
      var geocoder = new AMap.Geocoder({
        city: "", // 默认：“全国”
        radius: 1000 // 范围，默认：500
      });
      geocoder.getAddress(["104.202818", "30.547344"], function (status, result) {
        if (status === 'complete' && result.regeocode) {
          var addressComponent = result.regeocode.addressComponent;
          console.log('addressComponent:', addressComponent.city)
        } else {
          log.error('根据经纬度查询地址失败')
        }
      });
    }
  }
}
</script>

public/index.html

// &plugin=AMap.Geocoder 可以引入Geocoder 不然会报错 AMap.Geocoder is not a constructor
<script
      type="text/javascript"
      src="http://webapi.amap.com/maps?v=1.4.4&key=6f79e2a127d6a4ae63440723254c04b0&plugin=AMap.Geocoder"
    ></script>