百度地图(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