vue3 移动端h5 加载高德地图 封装地图组件

效果展示：

准备工作：
首先，需要注册成为高德开放平台的开发者，并申请 Web 平台（JS API）的 key 和安全密钥（在 2021 年 12 月 2 日之后申请的 key 需要配合安全密钥一起使用）
https://console.amap.com/dev/key/app

安装高德地图 API：
使用 npm 安装高德地图 API 的加载器

npm i @amap/amap-jsapi-loader --save

创建地图组件：
在项目中新建一个 MapContainer.vue 文件，用作地图组件

<script setup>
import { ref, toRefs, onMounted, onUnmounted, defineProps, defineEmits } from 'vue';
import AMapLoader from '@amap/amap-jsapi-loader';

// 定义组件的 props
const props = defineProps({
    height: {
        type: String,
        default: '800px'
    },
    width: {
        type: String,
        default: '100%'
    },
    options: {
        type: Object,
        default: () => ({
            zoom: 14,
            resizeEnable: true,
            viewMode: '2D',
            mapStyle: 'amap://styles/normal',
            lang: 'zh_cn'
        })
    }
});

// 解构 props
const { height, width, options } = toRefs(props);

// 定义事件
const emit = defineEmits(["map"]);

// 地图实例引用
const map = ref(null);

// 初始化地图
const initMap = () => {
    // 设置高德地图的安全配置
    window._AMapSecurityConfig = {
        securityJsCode: '你的安全密钥'
    };

    // 加载高德地图 SDK
    AMapLoader.load({
        key: '你的key',
        version: '2.0',
        plugins: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale'],
    }).then((AMap) => {
        // 创建地图实例
        map.value = new AMap.Map('container', { ...options.value });
        // 触发 map 事件，传递地图实例
        emit('map', map.value);
    }).catch((e) => {
        console.error('AMap 未找到，请确保正确引入了高德地图 SDK', e);
    });
};

// 组件挂载时初始化地图
onMounted(() => {
    initMap();
});

// 组件卸载时销毁地图实例
onUnmounted(() => {
    if (map.value) {
        map.value.destroy();
        map.value = null;
    }
});
</script>

<template>
    <div id="container" :style="{ height: height, width: width }"></div>
</template>

<style scoped>
#container {
    width: 100%;
    height: 100%;
}
</style>

使用地图组件：
在你需要的页面引入地图组件

<script setup>
import { ref, onMounted } from 'vue';
import MapContainer from '@/components/MapContainer.vue';

const height = ref(`${window.innerHeight}px`);
const amap = ref(null);
const amapOptions = {
    zoom: 14,
    resizeEnable: true,
    viewMode: '3D',
    mapStyle: 'amap://styles/macaron',
    center: [121.492156, 31.233462],
    lang: 'zh_cn'
};
const marker = ref(null);
const getAMapData = (map) => {
    amap.value = map;
    marker.value = new AMap.CircleMarker({
        center: [121.492156, 31.233462],
        radius: 20,
        strokeColor: "white",
        strokeWeight: 2,
        strokeOpacity: 0.5,
        fillColor: "rgba(255,0,175,1)",
        fillOpacity: 0.5,
        zIndex: 10,
        map: amap.value
    });
};
</script>

<template>
    <div class="map-container">
        <MapContainer :height="height" :options="amapOptions" @map="getAMapData" />
    </div>
</template>

<style lang="scss" scoped>
.map-container {
    height: 100%;
    width: 100%;
}
</style>