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

效果展示:

准备工作:

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





安装高德地图 API:

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

javascript 复制代码
npm i @amap/amap-jsapi-loader --save

创建地图组件:

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

javascript 复制代码
<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>

使用地图组件:

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

javascript 复制代码
<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>
相关推荐
南草徽9 天前
arcgis分割 (Split)
arcgis
野生工程师11 天前
【ArcGIS】在线影像底图调用
arcgis
装疯迷窍_A12 天前
ARCGIS国土超级工具集1.6更新说明
arcgis·插件·尖锐角·电子报盘·批量分割矢量
@菜菜_达12 天前
AgGrid学习笔记
笔记·学习·arcgis
德育处主任Pro13 天前
AntV G 入门教程
arcgis
啦啦球晃晃13 天前
Arcgis地理配准变换方法说明
算法·arcgis
haokan_Jia14 天前
ArcGIS中利用泰森多边形法分析站点与流域占比
arcgis
阮少年、16 天前
ArcGIS Server发布MapServer和FeartureServer后无法访问一直转圈加载问题的一种解决方法
运维·服务器·arcgis
西域健客18 天前
Arcgis中,toolbox工具箱中工具莫名报错的解决方法
arcgis
Lauren_Lu18 天前
如何在 ArcGIS 中使用 Microsoft Excel 文件_20250614
microsoft·arcgis·excel