百度地圖（9）-地圖事件

1. 百度地圖API提供的事件還是很齊全的， 基本上包括了所需要的各種可能。

 

2. 地圖事件一般是對 map 對象添加 EventListener, 當然添加了也可以刪除。對不同的點擊不同的業務邏輯，可以先把

以前的事件刪除，再添加新的業務邏輯。

  function showinfo(e){
    console.log(e.point.lng + "," + e.point.lat);
    //map.removeEventListener("click",showinfo);
  };

  /**
   * 地圖點擊事件
   */
  map.addEventListener("click",showinfo);

 

3. 代碼

  function showinfo(e){
    console.log(e.point.lng + "," + e.point.lat);
    //map.removeEventListener("click",showinfo);
  };

  /**
   * 地圖點擊事件
   */
  //map.addEventListener("click",showinfo);

  map.addEventListener("dblclick",function () {
    console.log("dblclick event.");
    map.removeEventListener("dblclick");
  });

  /**
   * 右鍵單擊事件
   */
  map.addEventListener("rightclick",function () {
    console.log("rightclick");
  });

  /**
   * 右鍵雙擊事件
   */
  map.addEventListener("rightdblclick",function () {
    console.log("rightdblclick");
  });

  /**
   * 鼠標移動
   **/
  map.addEventListener("mousemove",function () {
    console.log("mousemove event.");
    map.removeEventListener("mousemove");
  });

  /**
   * 鼠標移入地圖
   */
  map.addEventListener("mouseover",function () {
    console.log("mouseover");
  });

  /**
   * 鼠標移出地圖
   */
  map.addEventListener("mouseout",function () {
    console.log("mouseout");
  });

  /**
   * 移動開始
   */
  map.addEventListener("movestart",function () {
    console.log("movestart");
  });

  /**
   * 移動中
   */
  map.addEventListener("moving",function () {
    console.log("moving");
  });

  /**
   * 移動結束
   */
  map.addEventListener("moveend",function () {
    console.log("moveend");
  });

  /**
   * 縮放開始事件
   */
  map.addEventListener("zoomstart",function () {
    console.log("地圖縮放開始至" + this.getZoom()+"級");
  });

  /**
   * 縮放結束事件
   */
  map.addEventListener("zoomend",function () {
    console.log("地圖縮放結束至" + this.getZoom()+"級");
  });

  /**
   * 添加覆蓋物
   */
  map.addEventListener("addoverlay",function () {
    console.log("addoverlay");
  });

  /**
   * 刪除覆蓋物
   */
  map.addEventListener("removeoverlay",function () {
    console.log("removeoverlay");
  });

  /**
   * 清除覆蓋物
   */
  map.addEventListener("clearoverlay",function () {
    console.log("clearoverlay");
  });

  /**
   * 添加控件
   */
  map.addEventListener("addcontrol",function () {
    console.log("addcontrol");
  });

  /**
   * 刪除控件
   */
  map.addEventListener("removecontrol",function () {
    console.log("removecontrol");
  });

  /**
   * 拖拽開始
   */
  map.addEventListener("dragstart",function () {
    console.log("dragstart");
  });

  /**
   * 拖拽移動中
   */
  map.addEventListener("dragging",function () {
    console.log("dragging");
  });

  /**
   * 拖拽結束
   */
  map.addEventListener("dragend",function () {
    console.log("dragend");
  });

  /**
   * 添加自定義圖層
   */
  map.addEventListener("addtilelayer",function () {
    console.log("addtilelayer");
  });

  /**
   * 刪除自定義圖層
   */
  map.addEventListener("removetilelayer",function () {
    console.log("removetilelayer");
  });

  /**
   * 調用Map.centerAndZoom()方法時會觸發此事件。這表示位置、縮放層級已經確定，但可能還在載入地圖圖塊
   */
  map.addEventListener("load",function () {
    console.log("load");
  });

  /**
   * 地圖可視區域變化大小
   */
  map.addEventListener("resize",function () {
    console.log("resize");
  });

  /**
   * 地圖所有圖塊都加載完成時觸發此事件
   */
  map.addEventListener("tilesloaded",function () {
    console.log("tilesloaded");
  });


  /**
   * 點擊熱區觸發事件
   */
  map.addEventListener("hotspotclick",function () {
    console.log("hotspotclick");
  });

  /**
   * 移至熱區觸發事件
   */
  map.addEventListener("hotspotover",function () {
    console.log("hotspotover");
  });

  /**
   * 移出區觸發事件
   */
  map.addEventListener("hotspotout",function () {
    console.log("hotspotout");
  });

  /**
   * 觸摸開始時觸發此事件，僅適用移動設備
   */
  map.addEventListener("touchstart",function () {
    console.log("touchstart");
  });

  /**
   * 觸摸移動時觸發此事件，僅適用移動設備
   */
  map.addEventListener("touchmove",function () {
    console.log("touchmove");
  });

  /**
   * 觸摸結束時觸發此事件，僅適用移動設備
   */
  map.addEventListener("touchend",function () {
    console.log("touchend");
  });

  /**
   * 長按事件，僅適用移動設備
   */
  map.addEventListener("longpress",function () {
    console.log("longpress");
  });

 

4. 代碼參考

https://github.com/WhatGIS/bdMap