# 地图事件
本章介绍 唯杰地图 vjmap 事件类型的使用。
# 事件绑定和取消
事件的绑定通过 map 实例的 on()方法实现，事件解绑移除通过 map 实例的 off()方法实现。
事件定义示例：
function customClick(e){
// 实现自定义单击事件
})
1
2
3
2
3
绑定自定义事件示例：
map.on("click", customClick);
1
自定义事件解除绑定示例：
map.off("click", customClick);
1
只监听一次特定事件。事件响应后将自动取消绑定
map.once('click', (e) => {
console.log('仅一次点击事件:', e.lngLat);
});
1
2
3
2
3
# 地图常见事件
# 地图加载事件
load 事件：地图对象创建后，开始加载地图资源，地图资源加载完成后触发 load 事件。
map.on("load", function() {
// 地图资源加载完成后触发
// 增加自定义数据源、自定义图层
});
1
2
3
4
2
3
4
# 地图鼠标事件
mouseout 事件：当鼠标移出地图时触发；
map.on("mouseout", function() {
console.log("鼠标从地图上移出了");
});
1
2
3
2
3
2、mousedown 事件：当鼠标按下时触发；
map.on("mousedown", function() {
console.log("鼠标按键按下了");
});
1
2
3
2
3
3、mouseup 事件：当鼠标按键释放时触发；
map.on("mouseup", function() {
console.log("鼠标按键释放了");
});
1
2
3
2
3
4、mousemove 事件：当鼠标在地图内移动时触发；
map.on("mousemove", function() {
console.log("鼠标在地图内移动中");
});
1
2
3
2
3
5、click 事件：鼠标在地图上任一位置单击时触发；
map.on("click", function() {
console.log("鼠标单击地图了");
});
1
2
3
2
3
6、dblclick 事件：鼠标在地图上任一位置双击时触发；
map.on("dblclick", function() {
console.log("鼠标双击地图了");
});
1
2
3
2
3
7、contextmenu 事件：鼠标在地图上任一位置右键点击时触发；
map.on("contextmenu", function() {
console.log("鼠标右键点击地图了");
});
1
2
3
2
3
# 地图移动事件
1、movestart 事件：地图要开始移动，但还未移动时触发的事件，地图移动过程中不触发；
map.on("movestart", function() {
console.log("地图要开始移动了");
});
1
2
3
2
3
2、move 事件：地图移动过程中触发；
map.on("move", function() {
console.log("地图在移动中");
});
1
2
3
2
3
moveend 事件：地图移动一次结束时触发的事件，地图移动过程中不触发；
map.on("moveend", function() {
console.log("地图移动结束了");
});
1
2
3
2
3
# 地图缩放事件
zoomstart 事件：当地图缩放开始时触发；
map.on("zoomstart", function() {
console.log("地图要开始zoom缩放了");
});
1
2
3
2
3
zoom 事件：地图缩放进行时触发；
map.on("zoom", function() {
console.log("地图在zoom缩放中");
});
1
2
3
2
3
zoomend 事件：地图缩放结束时触发；
map.on("zoomend", function() {
console.log("地图zoom缩放结束了");
});
1
2
3
2
3
# 地图旋转事件
rotatestart 事件：当地图旋转开始时触发；
map.on("rotatestart", function() {
console.log("地图要开始旋转了");
});
1
2
3
2
3
rotate 事件：地图旋转进行时触发；
map.on("rotate", function() {
console.log("地图在旋转进行中");
});
1
2
3
2
3
rotateend 事件：地图旋转结束时触发；
map.on("rotateend", function() {
console.log("地图旋转结束了");
});
1
2
3
2
3
# 地图俯仰事件
pitchstart 事件：当地图俯仰开始时触发；
map.on("pitchstart", function() {
console.log("地图要开始俯仰了");
});
1
2
3
2
3
pitch 事件：地图俯仰进行时触发；
map.on("pitch", function() {
console.log("地图在俯仰进行中");
});
1
2
3
2
3
pitchend 事件：地图俯仰结束时触发；
map.on("pitchend", function() {
console.log("地图俯仰结束了");
});
1
2
3
2
3
# 地图触摸事件
touchstart 事件：手指放在地图上时触发；
map.on("touchstart", function() {
console.log("手指开始触摸地图了");
});
1
2
3
2
3
touchend 事件：手指从地图上移开时触发；
map.on("touchend", function() {
console.log("手指触摸地图结束了");
});
1
2
3
2
3
touchcancel 事件：手指从地图上移动中断时触发；
map.on("touchcancel", function() {
console.log("手指触摸地图中断了");
});
1
2
3
2
3