高德地图 Web JS API示例学习笔记（5）——事件系统（地图事件、覆盖物事件、其他事件）

地图事件

地图加载完成事件

监听Map的complete事件，可在该事件回调里添加基于地图的其它逻辑代码。

map.on('complete', function () {
	document.getElementById('tip').innerHTML = "地图图块加载完毕！当前地图中心点为：" + map.getCenter();
});

地图移动事件

绑定和解绑 Map 的 movestart、mapmove、mapend 等地图移动相关事件。

function mapMovestart() {
  document.querySelector("#text").innerText = '地图移动开始';
}

function mapMove() {
  logMapinfo();
  document.querySelector("#text").innerText = '地图正在移动';
}

function mapMoveend() {
  document.querySelector("#text").innerText = '地图移动结束';
}

// 事件绑定
function moveOn() {
  log.success("绑定事件!");
  map.on('movestart', mapMovestart);
  map.on('mapmove', mapMove);
  map.on('moveend', mapMoveend);
}
// 解绑事件
function moveOff() {
  log.success("解除事件绑定!");
  map.off('movestart', mapMovestart);
  map.off('mapmove', mapMove);
  map.off('moveend', mapMoveend);
}

地图缩放相关事件

绑定和解绑 Map 的 zoomstart、zoomchange、zoomend 等地图缩放相关事件。

function mapZoomstart(){
        document.querySelector("#text").innerText = '缩放开始';
    }
    function mapZoom(){
        logMapinfo();
        document.querySelector("#text").innerText = '正在缩放';
    }
    function mapZoomend(){
        document.querySelector("#text").innerText = '缩放结束';
    }
        
    // 事件绑定
    function zoomOn(){
        log.success("绑定事件!");  
        map.on('zoomstart', mapZoomstart);
        map.on('zoomchange', mapZoom);
        map.on('zoomend', mapZoomend);
    }
    // 解绑事件
    function zoomOff(){
        log.success("解除事件绑定!"); 
        map.off('zoomstart', mapZoomstart);
        map.off('zoomchange', mapZoom);
        map.off('zoomend', mapZoomend);
    }

地图点击和鼠标事件

监听Map的click事件，获取用户在地图上的点击位置信息。可用于坐标拾取等场景。

function showInfoClick(e){
	var text = '您在 [ '+e.lnglat.getLng()+','+e.lnglat.getLat()+' ] 的位置单击了地图！'
    document.querySelector("#text").innerText = text;
}
function showInfoDbClick(e){
    var text = '您在 [ '+e.lnglat.getLng()+','+e.lnglat.getLat()+' ] 的位置双击了地图！'
    document.querySelector("#text").innerText = text;
}
function showInfoMove(){
    var text = '您移动了您的鼠标！'
    document.querySelector("#text").innerText = text;
}
// 事件绑定
function clickOn(){
    log.success("绑定事件!");  
    map.on('click', showInfoClick);
    map.on('dblclick', showInfoDbClick);
    map.on('mousemove', showInfoMove);
}
// 解绑事件
function clickOff(){
    log.success("解除事件绑定!"); 
    map.off('click', showInfoClick);
    map.off('dblclick', showInfoDbClick);
    map.off('mousemove', showInfoMove);
}

地图拖拽相关事件

绑定和解绑 Map 的 dragstart、dragging 等拖拽相关事件，在拖拽的过程中起到监听地图中心点等信息的作用。

   function showInfoDragstart(e){
        var text = '开始拖拽地图！'
        document.querySelector("#text").innerText = text;
    }
    function showInfoDragging(e){
        var text = '正在拖拽地图！'
        document.querySelector("#text").innerText = text;
    }
    function showInfoDragend(){
        var text = '拖拽地图结束！'
        document.querySelector("#text").innerText = text;
    }
    // 事件绑定
    function clickOn(){
        log.success("绑定事件!");  
        map.on('dragstart', showInfoDragstart);
        map.on('dragging', showInfoDragging);
        map.on('dragend', showInfoDragend);
    }
    // 解绑事件
    function clickOff(){
        log.success("解除事件绑定!"); 
        map.off('dragstart', showInfoDragstart);
        map.off('dragging', showInfoDragging);
        map.off('dragend', showInfoDragend);
    }

覆盖物事件（重点）

覆盖物点击和鼠标事件

绑定和解绑覆盖物（点、圆、多边形等矢量要素）的 click、mouseover、mouseout 等点击相关事件

  function showInfoM(e) {
      var text = '您在 [ ' + e.lnglat.getLng() + ',' + e.lnglat.getLat() + ' ] 的位置点击了marker！'
      document.querySelector("#text").innerText = text;
    }

    function showInfoC(e) {
      var text = '您在 [ ' + e.lnglat.getLng() + ',' + e.lnglat.getLat() + ' ] 的位置点击了圆！'
      document.querySelector("#text").innerText = text;
    }

    function showInfoP(e) {
      var text = '您在 [ ' + e.lnglat.getLng() + ',' + e.lnglat.getLat() + ' ] 的位置点击了多边形！'
      document.querySelector("#text").innerText = text;
    }

    function showInfoOver(e) {
      var text = '鼠标移入覆盖物！'
      document.querySelector("#text").innerText = text;
    }

    function showInfoOut(e) {
      var text = '鼠标移出覆盖物！'
      document.querySelector("#text").innerText = text;
    }

    function clickOn() {
      log.success("绑定事件!");

      marker.on('click', showInfoM);
      circle.on('click', showInfoC);
      polygon.on('click', showInfoP);

      marker.on('mouseover', showInfoOver);
      circle.on('mouseover', showInfoOver);
      polygon.on('mouseover', showInfoOver);

      marker.on('mouseout', showInfoOut);
      circle.on('mouseout', showInfoOut);
      polygon.on('mouseout', showInfoOut);
    }

    function clickOff() {
      log.success("解除事件绑定!");

      marker.off('click', showInfoM);
      circle.off('click', showInfoC);
      polygon.off('click', showInfoP);

      marker.off('mouseover', showInfoOver);
      circle.off('mouseover', showInfoOver);
      polygon.off('mouseover', showInfoOver);

      marker.off('mouseout', showInfoOut);
      circle.off('mouseout', showInfoOut);
      polygon.off('mouseout', showInfoOut);
    }

信息窗体打开关闭事件

监听信息窗体的 open 和 close 事件。

//在指定位置打开信息窗体
function openInfo() {
    //构建信息窗体中显示的内容
    var info = [];
    info.push("<div><div><img style=\"float:left;\" src=\" https://webapi.amap.com/images/autonavi.png \"/></div> ");
    info.push("<div style=\"padding:0px 0px 0px 4px;\"><b>高德软件</b>");
    info.push("电话 : 010-84107000   邮编 : 100102");
    info.push("地址 :北京市朝阳区望京阜荣街10号首开广场4层</div></div>");
    infoWindow = new AMap.InfoWindow({
        content: info.join("<br/>")  //使用默认信息窗体框样式，显示信息内容
    });
    infoWindow.on('open',showInfoOpen)
    infoWindow.on('close',showInfoClose)
    infoWindow.open(map, map.getCenter());
}
function closeInfo() {
    infoWindow.close();
}

1. showInfoOpen是信息窗体打开时的回调函数，showInfoClose是信息窗体关闭时的回调函数
2. AMap.InfoWindow()实例的open方法声明：

open(map:Map,pos:AMap.LngLat) //在地图的指定位置打开信息窗体

其他事件

DOM事件（重点）

在其它DOM元素的click事件里，和地图做交互操作。

//bt1的click的绑定事件
    var bind = function () {
      remove(); //防止重复绑定
      //clickListener 为全局变量
      clickListener = AMap.event.addListener(map, "click", function (e) {
        new AMap.Marker({
          position: e.lnglat,
          map: map
        });
      });
    };
    //bt2的click的绑定事件
    var remove = function () {
      if (clickListener) {
        AMap.event.removeListener(clickListener); //移除事件，以绑定时返回的对象作为参数
      }
    };
    var button1 = document.getElementById('bt1');
    var listener1 = AMap.event.addDomListener(button1, 'click', bind); //给div绑定单击事件  
    var button2 = document.getElementById('bt2');
    var listener2 = AMap.event.addDomListener(button2, 'click', remove); //给div绑定单击事件