---
title: 地图事件
source: https://vjmap.com/guide/mapEvents.html
---

# 地图事件

本章介绍 `唯杰地图` `vjmap` 事件类型的使用。


## 事件绑定和取消
事件的绑定通过 map 实例的 on()方法实现，事件解绑移除通过 map 实例的 off()方法实现。

事件定义示例：

```js
function customClick(e){
    // 实现自定义单击事件
})
```


绑定自定义事件示例：

```js
map.on("click", customClick);
```


自定义事件解除绑定示例：

```js
map.off("click", customClick);
```

只监听一次特定事件。事件响应后将自动取消绑定

```js
map.once('click', (e) => {
    console.log('仅一次点击事件:', e.lngLat);
});
```

## 地图常见事件
### 地图加载事件

---

**load 事件**：地图对象创建后，开始加载地图资源，地图资源加载完成后触发 load 事件。

```js
map.on("load", function() {
  // 地图资源加载完成后触发
  // 增加自定义数据源、自定义图层
});
```


### 地图鼠标事件

**mouseout 事件**：当鼠标移出地图时触发；

```js
map.on("mouseout", function() {
  console.log("鼠标从地图上移出了");
});
```


**2、mousedown 事件**：当鼠标按下时触发；

```js
map.on("mousedown", function() {
  console.log("鼠标按键按下了");
});
```

**3、mouseup 事件**：当鼠标按键释放时触发；

```js
map.on("mouseup", function() {
  console.log("鼠标按键释放了");
});
```


**4、mousemove 事件**：当鼠标在地图内移动时触发；

```js
map.on("mousemove", function() {
  console.log("鼠标在地图内移动中");
});
```


**5、click 事件**：鼠标在地图上任一位置单击时触发；

```js
map.on("click", function() {
  console.log("鼠标单击地图了");
});
```


**6、dblclick 事件**：鼠标在地图上任一位置双击时触发；

```js
map.on("dblclick", function() {
  console.log("鼠标双击地图了");
});
```


**7、contextmenu 事件**：鼠标在地图上任一位置右键点击时触发；

```js
map.on("contextmenu", function() {
  console.log("鼠标右键点击地图了");
});
```


### 地图移动事件

---

**1、movestart 事件**：地图要开始移动，但还未移动时触发的事件，地图移动过程中不触发；

```js
map.on("movestart", function() {
  console.log("地图要开始移动了");
});
```


**2、move 事件**：地图移动过程中触发；

```js
map.on("move", function() {
  console.log("地图在移动中");
});
```


**moveend 事件**：地图移动一次结束时触发的事件，地图移动过程中不触发；

```js
map.on("moveend", function() {
  console.log("地图移动结束了");
});
```


### 地图缩放事件

---

**zoomstart 事件**：当地图缩放开始时触发；

```js
map.on("zoomstart", function() {
  console.log("地图要开始zoom缩放了");
});
```

**zoom 事件**：地图缩放进行时触发；

```js
map.on("zoom", function() {
  console.log("地图在zoom缩放中");
});
```


**zoomend 事件**：地图缩放结束时触发；

```js
map.on("zoomend", function() {
  console.log("地图zoom缩放结束了");
});
```

### 地图旋转事件

---

**rotatestart 事件**：当地图旋转开始时触发；

```js
map.on("rotatestart", function() {
  console.log("地图要开始旋转了");
});
```


**rotate 事件**：地图旋转进行时触发；

```js
map.on("rotate", function() {
  console.log("地图在旋转进行中");
});
```

**rotateend 事件**：地图旋转结束时触发；

```js
map.on("rotateend", function() {
  console.log("地图旋转结束了");
});
```


### 地图俯仰事件

---

**pitchstart 事件**：当地图俯仰开始时触发；

```js
map.on("pitchstart", function() {
  console.log("地图要开始俯仰了");
});
```


**pitch 事件**：地图俯仰进行时触发；

```js
map.on("pitch", function() {
  console.log("地图在俯仰进行中");
});
```

**pitchend 事件**：地图俯仰结束时触发；

```js
map.on("pitchend", function() {
  console.log("地图俯仰结束了");
});
```


### 地图触摸事件

---

**touchstart 事件**：手指放在地图上时触发；

```js
map.on("touchstart", function() {
  console.log("手指开始触摸地图了");
});
```


**touchend 事件**：手指从地图上移开时触发；

```js
map.on("touchend", function() {
  console.log("手指触摸地图结束了");
});
```


**touchcancel 事件**：手指从地图上移动中断时触发；

```js
map.on("touchcancel", function() {
  console.log("手指触摸地图中断了");
});
```