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>
相关推荐
GIS工具-gistools202110 小时前
ArcGIS Excalibur 的新功能
人工智能·arcgis
2301_7943339111 小时前
React入门 | React 新手入门与常用库和工具
arcgis
GIS之家2 天前
vue3+arcgisAPI4示例:绘图工具动态修改样式导出GeoJSON(附源码下载)
arcgis·gis·webgis
@高蕊2 天前
光伏项目无人机踏勘--如何使用无人机自动航线规划APP
arcgis·无人机
wanzhong23333 天前
ArcGIS答疑-如何消除两张栅格图片中间的黑缝
arcgis
杨超越luckly3 天前
HTML应用指南:利用GET请求获取全国招商银行网点位置信息
前端·arcgis·信息可视化·html·银行网点
枝上棉蛮4 天前
ArcGIS与GISBox对比:中小企业GIS工具的高门槛与零门槛之选
arcgis·格式转换·osgb·gisbox·服务分发·免费发布·场景编辑
小彭努力中6 天前
164.在 Vue3 中使用 OpenLayers 加载 Esri 地图(多种形式)
开发语言·前端·javascript·vue.js·arcgis
杨超越luckly6 天前
HTML应用指南:利用POST请求获取全国便利蜂门店位置信息
前端·arcgis·信息可视化·html·门店
GISerQ.6 天前
ArcGIS:如何设置地图文档的相对路径或者发布为地图包
arcgis