目录
先上图
1.npm引入插件（高德地图官方推荐）
2.页面中引入使用
3.地图初始化
4.标记marker的添加和删除
先上图
1.npm引入插件（高德地图官方推荐）
npm install @amap/amap-jsapi-loader2.页面中引入使用
import AMapLoader from '@amap/amap-jsapi-loader';
AMapLoader.load({
key: "yourkey",
version: "2.0",
// resizeEnable: true,
plugins: [
'AMap.PathSimplifier','AMap.Geocoder', 'AMap.MouseTool', 'AMap.PolyEditor', 'AMap.CircleEditor', 'AMap.AutoComplete',
'AMap.PlaceSearch'
]
}).then(() => {
console.log('地图加载成功');
}).catch(err => {
console.log('地图加载失败');
})如果有多个页面使用到地图，可以在main.js中引入，即可全局注册AMapLoader
key的获取，进入高德地图开发平台--控制台，复制自己的key
全局配置安全密钥（获取方式同上）
window._AMapSecurityConfig = {
securityJsCode: 'yourCode' //* 安全密钥
}plugins用于配置使用的插件，可自行按需配置
3.地图初始化
<div id="mapContainer"></div>onMounted(()=>{
initMap()
)
let map = null
const initMap = () => {
try {
map = new AMap.Map("mapContainer", {
resizeEnable: true,
zoom: 5,
mapStyle: "amap://styles/darkblue",//地图主题（可选）
center: [116.478935, 39.997761], //初始化地图中心点位置
});
} catch (err) {
ElMessage.error('地图加载失败')
}
}经过AMapLoader.load初始化后，便可以如上所述直接使用AMap对象
4.标记marker的添加和删除
①获取关于marker的数据，至少有经纬度，若有多个marker，需有一个参数用来标记，从而区分不同的marker
例如：
[{
id: 1,
long: 117.2563,
lat: 31.1555
},
{
id: 2,
long: 115.2563,
lat: 34.1555
},
......
]
②绘制marker图标
创建图标并设置尺寸样式
const onlineIcon = new aMap.value.Icon({
size: new aMap.value.Size(75, 133), // 图标大小
image: require('../assets/other/onlinedev.png'),
// 自定义图片路径，需确保图片可访问
imageOffset: new aMap.value.Pixel(0, 0), // 图像相对于点的位置偏移
});③添加marker图标和文字，并绑定图标的点击事件（多个）
let markers = reactive({})
let markerList = []
//addArr.value为marker的数据
addArr.value.map(device => {
var marker = new aMap.value.Marker({
icon: onlineIcon,
position: [device.lang, device.lat],
anchor: 'bottom-center'
});
// 图标下的文字
marker.setLabel({
direction: 'bottom',
offset: new aMap.value.Pixel(0, 10), //设置文本标注偏移量
content: `<div class="labeltext"
style="backgroundcolor:#21C754'}">{{device.ID}}</div>`, //设置文本标注内容
});
//如果markers没有包含 则新增
if (!markers[device.ID]) {
markers[device.ID] = marker
map.add(marker);
markerList.push(marker)
// 标记点添加点击事件
markers[device.ID].on('click', function() {
console.log('点击了' + device.ID);
})
}
})
//地图实例上添加
map.setFitView(markerList, true, [150, 60, 60, 60], 15);参数说明
markers：用于存储已添加的marker的标记和实例
markersList：marker实例，用于批量添加
map.setFitView的第三个参数[150,60,60,60]控制上下左右的距离，防止边缘被遮挡
④删除marker
获取到要删除的marker的ID信息，此处用上之前定义的
markInfo.map(device => {
map.remove(markers[device.deviceID])
delete markers[device.deviceID]
})以上就是本期文章全部内容，如需了解更多高德地图使用
可参考主页专栏其他文章
