vue3引入高德地图找不到Map？

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

先看效果图

在public文件夹的index.html中引入高德js

<script src="https://webapi.amap.com/maps?v=1.4.8&key="你自己申请的key"&plugin=ElasticMarker,AMap.Autocomplete,AMap.PlaceSearch,AMap.Geocoder"></script>

<template>
  <div id="mapGaode" style="width: 100%; height: 100vh"></div>
</template>
 
<script>
import { onMounted, reactive, toRefs } from "vue";
import AMap from "AMap";
export default {
  setup() {
    //高德地图引入
    const gaode = () => {
      // 创建地图实例
      let map = new AMap.Map("mapGaode", {
        center: [113.672361,34.7586],
        zoom: 11.2,
      });
      //底部颜色
      var styleName = "amap://styles/" + "black";
      //黑色
      map.setMapStyle(styleName); 
    };
    onMounted(() => {
      gaode();
    });
    return {
     
    };
  },
};
</script>
 
<style scoped></style>

重点来了在这里

一定要在vue.config.js中加上不然或报错找不到Map

configureWebpack: config => {
    config.externals = {
      AMap: 'AMap'
    }
  },