vue3怎么引入高德地图

1.在高德开发平台申请你的key高德开发平台

2.在public/index.html引入高德的cdn

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=你的key,在高德控制台可以看到"></script> 

在这里插入代码片

3.在vue.config.js全局配置引入的高德地图cdn

module.exports = {
    
    
  configureWebpack: {
    
    
    externals: {
    
    
      AMap: 'AMap'
    }
  }
}

4.重新运行项目

5.在需要的vue文件中调用高德地图

import AMap from 'AMap'
import {
    
     onMounted, reactive, toRefs } from 'vue';

export default {
    
    
    setup() {
    
    
        const state = reactive({
    
    
        });
         //高德地图引入
        const gaode = () =>{
    
    
            // 创建地图实例
            let map = new AMap.Map("map", {
    
    
                center: [114.298572, 30.584355],
                zoom: 11.2,
                // showLabel: false, //不显示地图文字标记
            });
            map.setCity("武汉市"); //初始化显示的区域
            var styleName = "amap://styles/" + "blue";//底部颜色
            map.setMapStyle(styleName);//极夜蓝
            new AMap.Marker({
    
    
                map: state.mapObj,
                position: new AMap.LngLat("226", "335"), //此处根据页面数据可以直接传入经纬度进行描点
            });
        }
        onMounted(() => {
    
    
           gaode() 
        });
        return {
    
    
            ...toRefs(state),
        };
    },
};