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>
相关推荐
杨超越luckly3 天前
HTML应用指南:利用GET请求获取全国奈雪的茶门店位置信息
大数据·前端·python·arcgis·信息可视化·html
zhou_x_b4 天前
解决栅格数据裁剪矢量数据问题两种方法,ArcGIS解决与PYTHON解决
arcgis
维维180-3121-14554 天前
ArcGIS水文及空间分析与SWMM融合协同在城市排水防涝领域中的应用
arcgis·水文·内涝
GIS小小研究僧8 天前
ArcGIS Pro+PS 实现地形渲染效果图
arcgis·gis·qgis·地理信息
杨超越luckly8 天前
Python应用指南:使用PyKrige包实现ArcGIS的克里金插值法
python·算法·arcgis·信息可视化·克里金法
WangYan20229 天前
Python+ArcGIS+AI蒸散发与GPP估算|Penman-Monteith模型|FLUXNET数据处理|多源产品融合|专业科研绘图与可视化等
arcgis·蒸散发·光合作用·植被生产力估算
清纯世纪10 天前
Arcgis 10.7 矢量的分区统计
arcgis
猫头虎10 天前
什么是 npm、Yarn、pnpm? 有什么区别? 分别适应什么场景?
前端·python·scrapy·arcgis·npm·beautifulsoup·pip
杨超越luckly11 天前
ArcGISPro应用指南:使用ArcGIS Pro创建与优化H3六边形网格
arcgis·信息可视化·数据可视化·shp·h3网格
柳晓黑胡椒11 天前
Cesium源码打包
arcgis