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

1. 百度地图API提供的事件还是很齐全的，基本上包括了所需要的各种可能。

2. 地图事件一般是对 map 对象添加 EventListener, 当然添加了也可以删除。对不同的点击不同的业务逻辑，可以先把

以前的事件删除，再添加新的业务逻辑。

1   function showinfo(e){
2     console.log(e.point.lng + "," + e.point.lat);
3     //map.removeEventListener("click",showinfo);
4   };
5 
6   /**
7    * 地图点击事件
8    */
9   map.addEventListener("click",showinfo);

3. 代码

  1   function showinfo(e){
  2     console.log(e.point.lng + "," + e.point.lat);
  3     //map.removeEventListener("click",showinfo);
  4   };
  5 
  6   /**
  7    * 地图点击事件
  8    */
  9   //map.addEventListener("click",showinfo);
 10 
 11   map.addEventListener("dblclick",function () {
 12     console.log("dblclick event.");
 13     map.removeEventListener("dblclick");
 14   });
 15 
 16   /**
 17    * 右键单击事件
 18    */
 19   map.addEventListener("rightclick",function () {
 20     console.log("rightclick");
 21   });
 22 
 23   /**
 24    * 右键双击事件
 25    */
 26   map.addEventListener("rightdblclick",function () {
 27     console.log("rightdblclick");
 28   });
 29 
 30   /**
 31    * 鼠标移动
 32    **/
 33   map.addEventListener("mousemove",function () {
 34     console.log("mousemove event.");
 35     map.removeEventListener("mousemove");
 36   });
 37 
 38   /**
 39    * 鼠标移入地图
 40    */
 41   map.addEventListener("mouseover",function () {
 42     console.log("mouseover");
 43   });
 44 
 45   /**
 46    * 鼠标移出地图
 47    */
 48   map.addEventListener("mouseout",function () {
 49     console.log("mouseout");
 50   });
 51 
 52   /**
 53    * 移动开始
 54    */
 55   map.addEventListener("movestart",function () {
 56     console.log("movestart");
 57   });
 58 
 59   /**
 60    * 移动中
 61    */
 62   map.addEventListener("moving",function () {
 63     console.log("moving");
 64   });
 65 
 66   /**
 67    * 移动结束
 68    */
 69   map.addEventListener("moveend",function () {
 70     console.log("moveend");
 71   });
 72 
 73   /**
 74    * 缩放开始事件
 75    */
 76   map.addEventListener("zoomstart",function () {
 77     console.log("地图缩放开始至" + this.getZoom()+"级");
 78   });
 79 
 80   /**
 81    * 缩放结束事件
 82    */
 83   map.addEventListener("zoomend",function () {
 84     console.log("地图缩放结束至" + this.getZoom()+"级");
 85   });
 86 
 87   /**
 88    * 添加覆盖物
 89    */
 90   map.addEventListener("addoverlay",function () {
 91     console.log("addoverlay");
 92   });
 93 
 94   /**
 95    * 删除覆盖物
 96    */
 97   map.addEventListener("removeoverlay",function () {
 98     console.log("removeoverlay");
 99   });
100 
101   /**
102    * 清除覆盖物
103    */
104   map.addEventListener("clearoverlay",function () {
105     console.log("clearoverlay");
106   });
107 
108   /**
109    * 添加控件
110    */
111   map.addEventListener("addcontrol",function () {
112     console.log("addcontrol");
113   });
114 
115   /**
116    * 删除控件
117    */
118   map.addEventListener("removecontrol",function () {
119     console.log("removecontrol");
120   });
121 
122   /**
123    * 拖拽开始
124    */
125   map.addEventListener("dragstart",function () {
126     console.log("dragstart");
127   });
128 
129   /**
130    * 拖拽移动中
131    */
132   map.addEventListener("dragging",function () {
133     console.log("dragging");
134   });
135 
136   /**
137    * 拖拽结束
138    */
139   map.addEventListener("dragend",function () {
140     console.log("dragend");
141   });
142 
143   /**
144    * 添加自定义图层
145    */
146   map.addEventListener("addtilelayer",function () {
147     console.log("addtilelayer");
148   });
149 
150   /**
151    * 删除自定义图层
152    */
153   map.addEventListener("removetilelayer",function () {
154     console.log("removetilelayer");
155   });
156 
157   /**
158    * 调用Map.centerAndZoom()方法时会触发此事件。这表示位置、缩放层级已经确定，但可能还在载入地图图块
159    */
160   map.addEventListener("load",function () {
161     console.log("load");
162   });
163 
164   /**
165    * 地图可视区域变化大小
166    */
167   map.addEventListener("resize",function () {
168     console.log("resize");
169   });
170 
171   /**
172    * 地图所有图块都加载完成时触发此事件
173    */
174   map.addEventListener("tilesloaded",function () {
175     console.log("tilesloaded");
176   });
177 
178 
179   /**
180    * 点击热区触发事件
181    */
182   map.addEventListener("hotspotclick",function () {
183     console.log("hotspotclick");
184   });
185 
186   /**
187    * 移至热区触发事件
188    */
189   map.addEventListener("hotspotover",function () {
190     console.log("hotspotover");
191   });
192 
193   /**
194    * 移出区触发事件
195    */
196   map.addEventListener("hotspotout",function () {
197     console.log("hotspotout");
198   });
199 
200   /**
201    * 触摸开始时触发此事件，仅适用移动设备
202    */
203   map.addEventListener("touchstart",function () {
204     console.log("touchstart");
205   });
206 
207   /**
208    * 触摸移动时触发此事件，仅适用移动设备
209    */
210   map.addEventListener("touchmove",function () {
211     console.log("touchmove");
212   });
213 
214   /**
215    * 触摸结束时触发此事件，仅适用移动设备
216    */
217   map.addEventListener("touchend",function () {
218     console.log("touchend");
219   });
220 
221   /**
222    * 长按事件，仅适用移动设备
223    */
224   map.addEventListener("longpress",function () {
225     console.log("longpress");
226   });

4. 代码参考

https://github.com/WhatGIS/bdMap