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>
相关推荐
赵钰老师1 天前
【SWAT模型应用】AI辅助下基于ArcGIS Pro的SWAT模型全流程高效建模实践与深度进阶应用
人工智能·arcgis·chatgpt·数据分析
白水先森3 天前
ArcGIS Pro中创建最低成本路径的详尽教程
经验分享·arcgis·arcgispro
小仙有礼了3 天前
ArcGis for js 4.x实现测量,测距,高程的功能
javascript·算法·arcgis
白水先森3 天前
ArcGIS Pro中打造精美高程渲染图的全面指南
经验分享·arcgis·信息可视化·arcgispro
GIS瞧葩菜3 天前
ArcGis和Super Map
arcgis·supermap
白水先森4 天前
ArcGIS Pro在洪水淹没分析中的应用与实践
经验分享·arcgis
白水先森4 天前
ArcGIS Pro热力图制作指南:从基础到进阶
经验分享·arcgis·信息可视化
白水先森5 天前
如何使用ArcGIS Pro高效查找小区最近的地铁站
经验分享·arcgis·信息可视化·数据分析
白水先森5 天前
ArcGIS Pro制作人口三维地图教程
arcgis·信息可视化·数据分析
摆烂老大6 天前
SWAT| 水文 | SWAT模型(四):气象数据库制备(附Python代码)
python·arcgis·水文·swat模型