vue3.x项目使用高德地图JS API 2.0

该篇文章主要讲述项目中某个需求中对高德地图JS API的相关使用，截取部分代码用作API使用示例，代码并不完整，可酌情参考

vue3.x项目使用高德地图JS API 2.0

1.API加载函数

// 需先安装依赖包：npm i @amap/amap-jsapi-loader --saveimport AMapLoader from '@amap/amap-jsapi-loader'const load = (options?: {plugins?: Array<string>AMapUI?: {plugins?: Array<string>}
}) => {if (!window._AMapSecurityConfig) {window._AMapSecurityConfig = {securityJsCode: "「你申请的安全密钥」"}}return AMapLoader.load({key: '', // 申请好的Web端开发者Key，首次调用 load 时必填version: '2.0',plugins: options?.plugins || [],AMapUI: {version: '1.1',plugins: options?.AMapUI?.plugins || []}})
}export default {load
}

2.初始化地图

<template><div class="amap" :id="mapId"></div>
</template>import AMapLoader from '@/util/AMap'let AMap = null
let map = null
let listMarkers = [] // 用于存储标记点
const mapId = ref(Date.now().toString())
const location = reactive({latitude: '',longitude: ''
})AMap = await AMapLoader.load()
map = new AMap.Map(mapId.value, {center: [location.longitude, location.latitude], // 地图中心点zoom: 20 // 缩放比例
})

3.引入地图插件

// 引入插件定位控件
AMap.plugin('AMap.Geolocation', function () {const Geolocation = new AMap.Geolocation({offset: [24, 240],showCircle: false})map.addControl(Geolocation)
})

4.自定义标记点

自定义图标图片locationImage引入方式：

1. 网络地址：locationImage = 'https://image.com/image'
2. 本地地址：locationImage = require('./image')
3. base64编码：locationImage = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUg....'

const locationIcon = new AMap.Icon({size: [58, 64],image: locationImage,imageSize: [58, 64]
})
const marker = new AMap.Marker({position: [location.longitude, location.latitude],icon: locationIcon
})
marker.setMap(map)

5.标记绑定自定义点击事件

// 在创建标记时绑定自定义事件
const createMarkers = (data) => {const markers = []data.forEach((item, index) => {const marker = new AMap.Marker({position: [item.longitude, item.latitude],icon: markerIcon})marker.on('click', function () {changeMarker(item, marker, index)})markers.push(marker)marker.setMap(map)})listMarkers = markers
}

6.切换选中标记点图标

// 点击时判断点击标记点是否为选中标记点，从而切换标记点图标
const changeMarker = (item, marker, index) => {if (selectMarker && selectMarker._amap_id !== marker._amap_id) selectMarker.setIcon(markerIcon)marker.setIcon(storeIcon)selectMarker = marker
}

7.打开信息窗体（自定义显示内容）

// 根据选中标记点，在标记点上方显示标记点信息窗体
const changeMarker = (item, marker, index) => {const infoWindow = new AMap.InfoWindow({isCustom: true,content: `<div style="background-color: #fff;padding: 6px;position: relative">${item.customername}<div style="width: 0;height: 0;border-left: 5px solid transparent;border-right: 5px solid transparent;border-top: 5px solid #fff;position: absolute;bottom: -5px;left: 50%;transform: translateX(-50%);"></div></div>`,offset: new AMap.Pixel(32, 0)})openInfoWindow = infoWindowopenInfoWindow.open(map, [item.longitude, item.latitude])
}

8.计算距离

// 使用高德地图API计算经纬度距离
const calculateDistance = (target) => {const start = [location.longitude, location.latitude]const end = [target.longitude, target.latitude]const distance = AMap.GeometryUtil.distance(start, end)return distance.toFixed(2)
}

9.关闭窗体以及移除标记点

const resetMap = () => {if (openInfoWindow) openInfoWindow.close()listMarkers.forEach((item) => {item.remove()})
}

10.销毁

onBeforeUnmount(() => {if (map) {map.destroy()map = null}AMap && (AMap = null)
})