【vue3】引入高德地图并初始化

npm安装@amap/amap-jsapi-loader包

<script setup>
import AMapLoader from '@amap/amap-jsapi-loader';
/*在Vue3中使用时,需要引入Vue3中的shallowRef方法
(使用shallowRef进行非深度监听,
因为在Vue3中所使用的Proxy拦截操作会改变JSAPI原生对象
否则会出现问题,建议JSAPI相关对象采用非响应式的普通对象来存储)*/
import { shallowRef } from '@vue/reactivity';

const allMap = shallowRef(null);

function initMap() {
    window._AMapSecurityConfig = {
        securityJsCode: '密钥',
    }
    AMapLoader.load({
        key: "key", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ["AMap.GeoJSON"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等

    }).then((AMap) => {
        const map = new AMap.Map("container", {  //设置地图容器id
            viewMode: "2D",    //是否为3D地图模式
            zoom: 10,           //初始化地图级别
            center: [119.898881, 30.594178], //初始化地图中心点位置
            mapStyle: 'amap://styles/...',

        });
        allMap.value = map
        });
    }).catch(e => {
        console.log(e);
    })
}
initMap()
</script>