开发 地图 JS API 2.0 进阶教程 地图 地图的交互与事件

地图的交互与事件 最后更新时间: 2023年11月27日

本文介绍地图的交互与事件:

  1. 地图交互: 高德 JS API 2.0 提供了丰富的地图交互功能,包括缩放、平移、旋转等操作,用户可以通过手势或鼠标进行地图操作,以实现更好的地图浏览体验。
  2. 地图事件: 简单介绍地图事件绑定方法和回调内容,了解更多事件请前往 地图和覆盖物事件

地图交互说明

交互属性可在初始化地图AMap.Map()时添加并配置对应属性的开启和关闭,如果不添加对应属性,则对应属性默认为开启状态。

2D / 3D 模式

PC 端

交互操作

作用

相关属性

可选值

鼠标滚轮

缩放地图

scrollWheel

true | false

鼠标左键双击(右键双击)

放大地图(缩小地图)

doubleClickZoom

true | false

鼠标拖动

移动地图

dragEnable

true | false

键盘上、下、左、右

移动地图

keyboardEnable

true | false

移动端

交互操作

作用

相关属性

可选值

双指捏合

缩放地图

touchZoom

true | false

单指滑动

移动地图

dragEnable

true | false

3D 模式

PC 端

交互操作

作用

相关属性

可选值

鼠标右键 + 鼠标上下移动 或 键盘Ctrl + 鼠标左键上下移动

改变地图倾角

pitchEnable

true | false

鼠标右键 + 鼠标画圈移动 或 键盘Ctrl + 鼠标左键画圈移动

改变地图旋转角度

rotateEnable

true | false

移动端

交互操作

作用

相关属性

可选值

双指在地图上转动

改变地图旋转角度

rotateEnable

true | false

双指上下滑动

改变地图倾角

pitchEnable

true | false

地图事件

地图事件是对Map底图操作后触发的事件,事件回调中返回MapsEvent对象。该对象包含触发的对象目标、触发所在经纬度等信息。

map.on("click", function (ev) {
  //触发事件的对象
  var target = ev.target;
  //触发事件的地理坐标,AMap.LngLat 类型
  var lnglat = ev.lnglat;
  //触发事件的像素坐标,AMap.Pixel 类型
  var pixel = ev.pixel;
  //触发事件类型
  var type = ev.type;
});

更多事件系统用法请前往 地图和覆盖物事件

返回顶部 示例中心 常见问题 智能客服 公众号
二维码