Vue+高德地图API：地图事件

1 地图事件

地图加载完成事件-地图事件-示例中心-JS API 2.0 示例 | 高德地图API (amap.com)https://lbs.amap.com/demo/javascript-api-v2/example/event/map-loading-complete-event

地图事件绑定用map.on();

地图事件解除用map.off();

地图事件一般分为三个阶段：地图事件开始，地图事件进行中、地图事件结束

地图加载完成事件

map.on('complete', function () {
	log.success('地图加载完成')
})

地图移动事件

 事件绑定

map.on('movestart',事件名（函数）)
map.on('mapmove',事件名（函数）)
map.on('moveend', 事件名（函数）)

事件解除

map.off('movestart',事件名（函数）)
map.off('mapmove',事件名（函数）)
map.off('moveend', 事件名（函数）)

地图缩放事件

事件绑定

map.on('zoomtart',事件名（函数）)
map.on('zoomchange',事件名（函数）)
map.on('zoomend', 事件名（函数）)

 事件解除

map.off('zoomtart',事件名（函数）)
map.off('zoomchange',事件名（函数）)
map.off('zoomend', 事件名（函数）)

地图点击和鼠标事件

事件绑定

map.on('click',事件名（函数）) 单击地图
map.on('dbclick',事件名（函数）) 双击地图
map.on('mousemove', 事件名（函数）)  鼠标移动

事件解除

map.off('click',事件名（函数）) 单击地图
map.off('dbclick',事件名（函数）) 双击地图
map.off('mousemove', 事件名（函数）)  鼠标移动

地图拖拽事件

事件绑定

map.on('dragstart',事件名（函数）) 
map.on('dragging',事件名（函数）) 
map.on('dragend', 事件名（函数）)  

事件解除

map.off('dragstart',事件名（函数）) 
map.off('dragging',事件名（函数）) 
map.off('dragend', 事件名（函数）)  

2 实例代码-地图移动事件

map.on('complete', function () {
				log.success('地图加载完成')
			})
			//	移动事件
			function logMapInfo() {
				var zoom = map.getZoom()
				var center = map.getCenter()
				document.getElementById('map-center').innerText =
					center.toString()
			}
			logMapInfo()
			function moveMapStart() {
				document.getElementById('text').innerText = '地图开始移动'
			}
			function moveMap() {
				logMapInfo()
				document.getElementById('text').innerText = '地图正在移动'
			}
			function moveMapEnd() {
				document.getElementById('text').innerText = '地图移动结束'
			}
			function moveOn() {
				log.success('绑定事件')
				map.on('movestart', moveMapStart) //mapzoomstart 地图开始缩放 $ dragstart
				map.on('mapmove', moveMap) //mapzoomchange 地图变化 $ draging
				map.on('moveend', moveMapEnd) //mapzoomend 地图结束缩放 $ dragend
			}
			function moveoff() {
				log.success('解除事件')
				map.off('movestart', moveMapStart)
				map.off('mapmove', moveMap)
				map.off('moveend', moveMapEnd)
			}
			document.getElementById('moveOn').onclick = moveOn
			document.getElementById('moveOff').onclick = moveoff

 3 完整代码-地图移动事件

<template>
	<div id="container" tabindex="0"></div>
	<div class="info">
		<h4 id="text"></h4>
		<p>当前中心点</p>
		<span id="map-center"></span>
	</div>
	<div class="input-card">
		<div class="input-item">
			<button id="moveOn" class="btn">绑定事件</button>
			<button id="moveOff" class="btn">解除事件</button>
		</div>
	</div>
</template>

<script setup>
import AMapLoader from '@amap/amap-jsapi-loader'
import { onMounted, onUnmounted } from 'vue'

let map = null
window._AMapSecurityConfig = {
	securityJsCode: '您的密钥',
}
onMounted(() => {
	// JS API加载器，可多次调用加载器
	AMapLoader.load({
		key: '您的KEY',
		version: '2.0',
		plugins: [
			'AMap.Marker',
			'AMap.Pixel',
			'AMap.LngLat',
			'AMap.Polyline',
			'AMap.Text',
		],
	})
		.then((AMap) => {
			map = new AMap.Map('container', {
				zoom: 11,
			})
			map.on('complete', function () {
				log.success('地图加载完成')
			})
			//	移动事件
			function logMapInfo() {
				var zoom = map.getZoom()
				var center = map.getCenter()
				document.getElementById('map-center').innerText =
					center.toString()
			}
			logMapInfo()
			function moveMapStart() {
				document.getElementById('text').innerText = '地图开始移动'
			}
			function moveMap() {
				logMapInfo()
				document.getElementById('text').innerText = '地图正在移动'
			}
			function moveMapEnd() {
				document.getElementById('text').innerText = '地图移动结束'
			}
			function moveOn() {
				log.success('绑定事件')
				map.on('movestart', moveMapStart) //mapzoomstart 地图开始缩放 $ dragstart
				map.on('mapmove', moveMap) //mapzoomchange 地图变化 $ draging
				map.on('moveend', moveMapEnd) //mapzoomend 地图结束缩放 $ dragend
			}
			function moveoff() {
				log.success('解除事件')
				map.off('movestart', moveMapStart)
				map.off('mapmove', moveMap)
				map.off('moveend', moveMapEnd)
			}
			document.getElementById('moveOn').onclick = moveOn
			document.getElementById('moveOff').onclick = moveoff

			
		})
		.catch((e) => {
			console.log(e)
		})
})
onUnmounted(() => {
	map?.destory()
})
</script>

<style scoped>
* {
	padding: 0;
	margin: 0;
}
#container {
	width: 100%;
	height: 706px;
}
.input-card {
	width: 24rem;
}
</style>

4 小总结

1 地图事件绑定用on，解除用off；

2 高德地图api内置样式，类名为info为信息框，默认位置在右上角；类名为input-card为展示卡片，子类名字为input-item，默认位置在右下角；