【百度地图API】如何给自定义覆盖物添加事件
2017-05-10 10:59
507 查看
摘要:
给marker、lable、circle等Overlay添加事件很简单,直接addEventListener即可。那么,自定义覆盖物的事件应该如何添加呢?我们一起来看一看~
-----------------------------------------------------------------------------------------
一、定义构造函数并继承Overlay
二、初始化自定义覆盖物
三、绘制覆盖物
四、添加覆盖物
五、给自定义覆盖物添加事件
1、显示事件
添加完以上显示覆盖物事件后,只需要下面这句话,就可以显示覆盖物了。
2、隐藏覆盖物
添加完以上code,只需使用这句话,即可隐藏覆盖物。
3、改变覆盖物颜色
上面这句话,是把覆盖物的背景颜色改成黄色,使用以下语句即可生效:
“第五部分、给覆盖物添加事件”小结:
我们在地图上添加了一个红色覆盖物,然后分别添加“显示、隐藏、改变颜色”的事件。示意图如下:
那么,我们需要在html里,先写出map的容器,和3个按钮。
然后,在javascript中,添加这三个函数:
六、如何给自定义覆盖物添加点击事件(这章重要!很多人问的)
比如,我们给自定义覆盖物点击click事件。首先,需要添加一个addEventListener 的事件。如下:
再写该函数里面的参数,比如click。这样就跟百度地图API里面的覆盖物事件一样了。
同理,添加完毕addEventListener之后,还可以添加其他鼠标事件,比如mouseover。
七、全部源代码
八、感谢大家支持!
API常见问题总结贴:http://tieba.baidu.com/p/1147019448
给marker、lable、circle等Overlay添加事件很简单,直接addEventListener即可。那么,自定义覆盖物的事件应该如何添加呢?我们一起来看一看~
-----------------------------------------------------------------------------------------
一、定义构造函数并继承Overlay
// 定义自定义覆盖物的构造函数 function SquareOverlay(center, length, color){ this._center = center; this._length = length; this._color = color; } // 继承API的BMap.Overlay SquareOverlay.prototype = new BMap.Overlay();
二、初始化自定义覆盖物
// 实现初始化方法 SquareOverlay.prototype.initialize = func 2266c tion(map){ // 保存map对象实例 this._map = map; // 创建div元素,作为自定义覆盖物的容器 var div = document.createElement("div"); div.style.position = "absolute"; // 可以根据参数设置元素外观 div.style.width = this._length + "px"; div.style.height = this._length + "px"; div.style.background = this._color; // 将div添加到覆盖物容器中 map.getPanes().markerPane.appendChild(div); // 保存div实例 this._div = div; // 需要将div元素作为方法的返回值,当调用该覆盖物的show、 // hide方法,或者对覆盖物进行移除时,API都将操作此元素。 return div; }
三、绘制覆盖物
// 实现绘制方法 SquareOverlay.prototype.draw = function(){ // 根据地理坐标转换为像素坐标,并设置给容器 var position = this._map.pointToOverlayPixel(this._center); this._div.style.left = position.x - this._length / 2 + "px"; this._div.style.top = position.y - this._length / 2 + "px"; }
四、添加覆盖物
//添加自定义覆盖物 var mySquare = new SquareOverlay(map.getCenter(), 100, "red"); map.addOverlay(mySquare);
五、给自定义覆盖物添加事件
1、显示事件
SquareOverlay.prototype.show = function(){ if (this._div){ this._div.style.display = ""; } }
添加完以上显示覆盖物事件后,只需要下面这句话,就可以显示覆盖物了。
mySquare.show();
2、隐藏覆盖物
// 实现隐藏方法 SquareOverlay.prototype.hide = function(){ if (this._div){ this._div.style.display = "none"; } }
添加完以上code,只需使用这句话,即可隐藏覆盖物。
mySquare.hide();
3、改变覆盖物颜色
SquareOverlay.prototype.yellow = function(){ if (this._div){ this._div.style.background = "yellow"; } }
上面这句话,是把覆盖物的背景颜色改成黄色,使用以下语句即可生效:
mySquare.yellow();
“第五部分、给覆盖物添加事件”小结:
我们在地图上添加了一个红色覆盖物,然后分别添加“显示、隐藏、改变颜色”的事件。示意图如下:
那么,我们需要在html里,先写出map的容器,和3个按钮。
<div style="width:520px;height:340px;border:1px solid gray" id="container"></div> <p> <input type="button" value="移除覆盖物" onclick="mySquare.hide();" /> <input type="button" value="显示覆盖物" onclick="mySquare.show();" /> <input type="button" value="变成黄色" onclick="mySquare.yellow();" /> </p>
然后,在javascript中,添加这三个函数:
// 实现显示方法
SquareOverlay.prototype.show = function(){
if (this._div){
this._div.style.display = "";
}
}
// 实现隐藏方法 SquareOverlay.prototype.hide = function(){ if (this._div){ this._div.style.display = "none"; } }
//改变颜色的方法
SquareOverlay.prototype.yellow = function(){ if (this._div){ this._div.style.background = "yellow"; } }
六、如何给自定义覆盖物添加点击事件(这章重要!很多人问的)
比如,我们给自定义覆盖物点击click事件。首先,需要添加一个addEventListener 的事件。如下:
SquareOverlay.prototype.addEventListener = function(event,fun){ this._div['on'+event] = fun; }
再写该函数里面的参数,比如click。这样就跟百度地图API里面的覆盖物事件一样了。
mySquare.addEventListener('click',function(){ alert('click'); });
同理,添加完毕addEventListener之后,还可以添加其他鼠标事件,比如mouseover。
mySquare.addEventListener('mousemover',function(){ alert('鼠标移上来了'); });
七、全部源代码
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>自定义覆盖物的点击事件</title> 6 <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script> 7 </head> 8 <body> 9 <div style="width:520px;height:340px;border:1px solid gray" id="container"></div> 10 <p> 11 <input type="button" value="移除覆盖物" onclick="mySquare.hide();" /> 12 <input type="button" value="显示覆盖物" onclick="mySquare.show();" /> 13 <input type="button" value="变成黄色" onclick="mySquare.yellow();" /> 14 </p> 15 </body> 16 </html> 17 <script type="text/javascript"> 18 var map = new BMap.Map("container"); // 创建Map实例 19 var point = new BMap.Point(116.404, 39.915); // 创建点坐标 20 map.centerAndZoom(point,15); // 初始化地图,设置中心点坐标和地图级别。 21 22 //1、定义构造函数并继承Overlay 23 // 定义自定义覆盖物的构造函数 24 function SquareOverlay(center, length, color){ 25 this._center = center; 26 this._length = length; 27 this._color = color; 28 } 29 // 继承API的BMap.Overlay 30 SquareOverlay.prototype = new BMap.Overlay(); 31 32 //2、初始化自定义覆盖物 33 // 实现初始化方法 34 SquareOverlay.prototype.initialize = function(map){ 35 // 保存map对象实例 36 this._map = map; 37 // 创建div元素,作为自定义覆盖物的容器 38 var div = document.createElement("div"); 39 div.style.position = "absolute"; 40 // 可以根据参数设置元素外观 41 div.style.width = this._length + "px"; 42 div.style.height = this._length + "px"; 43 div.style.background = this._color; 44 // 将div添加到覆盖物容器中 45 map.getPanes().markerPane.appendChild(div); 46 // 保存div实例 47 this._div = div; 48 // 需要将div元素作为方法的返回值,当调用该覆盖物的show、 49 // hide方法,或者对覆盖物进行移除时,API都将操作此元素。 50 return div; 51 } 52 53 //3、绘制覆盖物 54 // 实现绘制方法 55 SquareOverlay.prototype.draw = function(){ 56 // 根据地理坐标转换为像素坐标,并设置给容器 57 var position = this._map.pointToOverlayPixel(this._center); 58 this._div.style.left = position.x - this._length / 2 + "px"; 59 this._div.style.top = position.y - this._length / 2 + "px"; 60 } 61 62 //4、显示和隐藏覆盖物 63 // 实现显示方法 64 SquareOverlay.prototype.show = function(){ 65 if (this._div){ 66 this._div.style.display = ""; 67 } 68 } 69 // 实现隐藏方法 70 SquareOverlay.prototype.hide = function(){ 71 if (this._div){ 72 this._div.style.display = "none"; 73 } 74 } 75 76 //5、添加其他覆盖物方法 77 //比如,改变颜色 78 SquareOverlay.prototype.yellow = function(){ 79 if (this._div){ 80 this._div.style.background = "yellow"; 81 } 82 } 83 84 //6、自定义覆盖物添加事件方法 85 SquareOverlay.prototype.addEventListener = function(event,fun){ 86 this._div['on'+event] = fun; 87 } 88 89 //7、添加自定义覆盖物 90 var mySquare = new SquareOverlay(map.getCenter(), 100, "red"); 91 map.addOverlay(mySquare); 92 93 //8、 为自定义覆盖物添加点击事件 94 mySquare.addEventListener('click',function(){ 95 alert('click'); 96 }); 97 </script>
八、感谢大家支持!
API常见问题总结贴:http://tieba.baidu.com/p/1147019448
相关文章推荐
- 【百度地图API】如何给自定义覆盖物添加事件
- 【百度地图API】如何给自定义覆盖物添加事件
- 【百度地图API】如何给自定义覆盖物添加事件
- 【百度地图API】如何给自定义覆盖物添加事件
- 【百度地图API】如何给自定义覆盖物添加事件
- 百度地图API如何给自定义覆盖物添加事件
- 百度地图API如何给自定义覆盖物添加事件
- 【百度地图API】如何给自定义覆盖物添加事件
- 百度地图API如何给自定义覆盖物添加事件
- 百度地图API自定义覆盖物与添加点击事件
- 百度地图API-给自定义覆盖物添加事件方法
- 百度地图API的事件处理:覆盖物的如何阻止冒泡
- 百度地图API自定义覆盖物的点击事件
- C#如何创建自定义控件以及添加自定义属性和事件使用
- c# 自定义控件如何在属性栏添加自定义事件
- 百度地图 自定义复杂覆盖物 并添加事件
- 如何创建自定义winForm控件 以及添加事件属性
- 嵌套DataGrid,中如何添加删除事件?(望能暂时放一下,谢谢了!)
- 如何为Team Foundation Server的Daily Build添加自定义操作
- 如何在浏览器地址栏前添加自定义的小图标?