百度地图API如何给自定义覆盖物添加事件

摘要:

给marker、lable、circle等Overlay添加事件很简单,直接addEventListener即可。那么,自定义覆盖物的事件应该如何添加呢?我们一起来看一看~

一、定义构造函数并继承Overlay

  1. //定义自定义覆盖物的构造函数  
  2. functionSquareOverlay(center, length, color){  
  3. this._center = center;  
  4. this._length = length;  
  5. this._color = color;  
  6. }  
  7. //继承API的BMap.Overlay  
  8. SquareOverlay.prototype = newBMap.Overlay(); 

二、初始化自定义覆盖物

  1. //实现初始化方法  
  2. SquareOverlay.prototype.initialize = function(map){  
  3. //保存map对象实例  
  4. this._map = map;  
  5. //创建div元素,作为自定义覆盖物的容器  
  6. vardiv = document.createElement(“div”);  
  7. div.style.position = “absolute”;  
  8. //可以根据参数设置元素外观  
  9. div.style.width = this._length + “px”;  
  10. div.style.height = this._length + “px”;  
  11. div.style.background = this._color;  
  12. //将div添加到覆盖物容器中  
  13. map.getPanes().markerPane.appendChild(div);  
  14.  //保存div实例  
  15. this._div = div;  
  16. //需要将div元素作为方法的返回值,当调用该覆盖物的show、  
  17. //hide方法,或者对覆盖物进行移除时,API都将操作此元素。  
  18. returndiv;  

三、绘制覆盖物

  1. //实现绘制方法  
  2. SquareOverlay.prototype.draw = function(){  
  3. //根据地理坐标转换为像素坐标,并设置给容器  
  4. varposition = this._map.pointToOverlayPixel(this._center);  
  5. this._div.style.left = position.x – this._length / 2 + “px”;  
  6. this._div.style.top = position.y – this._length / 2 + “px”;  

四、添加覆盖物

  1. //添加自定义覆盖物  
  2. varmySquare = newSquareOverlay(map.getCenter(), 100, “red”);  
  3. map.addOverlay(mySquare); 

五、给自定义覆盖物添加事件

1、显示事件

  1. SquareOverlay.prototype.show = function(){  
  2. if(this._div){  
  3. this._div.style.display = “”;  
  4. }  

添加完以上显示覆盖物事件后,只需要下面这句话,就可以显示覆盖物了。

mySquare.show();

2、隐藏覆盖物

  1. //实现隐藏方法  
  2. SquareOverlay.prototype.hide = function(){  
  3. if(this._div){  
  4. this._div.style.display = “none”;  
  5. }  

添加完以上code,只需使用这句话,即可隐藏覆盖物。

mySquare.hide();

3、改变覆盖物颜色

  1. SquareOverlay.prototype.yellow = function(){  
  2. if(this._div){  
  3. this._div.style.background = “yellow”;  
  4. }  

上面这句话,是把覆盖物的背景颜色改成黄色,使用以下语句即可生效:

mySquare.yellow();

“第五部分、给覆盖物添加事件”小结:

我们在地图上添加了一个红色覆盖物,然后分别添加“显示、隐藏、改变颜色”的事件。示意图如下:

那么,我们需要在html里,先写出map的容器,和3个按钮。

  1. <div style=”width:520px;height:340px;border:1px solid gray”id=”container”></div> 
  2. <p> 
  3. <input type=”button”value=”移除覆盖物”onclick=“mySquare.hide();”/> 
  4. <input type=”button”value=”显示覆盖物”onclick=“mySquare.show();”/> 
  5. <input type=”button”value=”变成黄色”onclick=“mySquare.yellow();”/> 
  6. </p> 
  7. 然后,在javascript中,添加这三个函数:  
  8. //实现显示方法  
  9. SquareOverlay.prototype.show = function(){  
  10. if(this._div){  
  11. this._div.style.display = “”;  
  12. }  
  13. }  
  14. //实现隐藏方法  
  15. SquareOverlay.prototype.hide = function(){  
  16. if(this._div){  
  17. this._div.style.display = “none”;  
  18. }  
  19. }  
  20. //改变颜色的方法  
  21. SquareOverlay.prototype.yellow = function(){  
  22.  if(this._div){  
  23. this._div.style.background = “yellow”;  
  24. }  

六、如何给自定义覆盖物添加点击事件(这章重要!很多人问的)

比如,我们给自定义覆盖物点击click事件。首先,需要添加一个addEventListener 的事件。如下:

  1. SquareOverlay.prototype.addEventListener = function(event,fun){  
  2. this._div[‘on’+event] = fun;  

再写该函数里面的参数,比如click。这样就跟百度地图API里面的覆盖物事件一样了。

  1. mySquare.addEventListener(‘click’,function(){  
  2. alert(‘click’);  
  3. }); 

同理,添加完毕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. varmap =newBMap.Map(“container”); //创建Map实例  
  19. varpoint =newBMap.Point(116.404, 39.915); //创建点坐标  
  20. map.centerAndZoom(point,15); //初始化地图,设置中心点坐标和地图级别。  
  21. //1、定义构造函数并继承Overlay  
  22. //定义自定义覆盖物的构造函数  
  23. functionSquareOverlay(center, length, color){ 25this._center =center; 26this._length =length; 27this._color =color; 28} 29//继承API的BMap.Overlay  
  24. SquareOverlay.prototype =newBMap.Overlay();   
  25. //2、初始化自定义覆盖物  
  26. //实现初始化方法  
  27. SquareOverlay.prototype.initialize =function(map){   
  28. //保存map对象实例  
  29. this._map =map;   
  30. //创建div元素,作为自定义覆盖物的容器  
  31. vardiv =document.createElement(“div”); div.style.position =“absolute”;  
  32. //可以根据参数设置元素外观  
  33. div.style.width =this._length +”px”;  
  34. div.style.height =this._length +”px”;  
  35. div.style.background =this._color;   
  36. //将div添加到覆盖物容器中  
  37. map.getPanes().markerPane.appendChild(div); 46//保存div实例  
  38. this._div =div; 48//需要将div元素作为方法的返回值,当调用该覆盖物的show、  
  39. //hide方法,或者对覆盖物进行移除时,API都将操作此元素。  
  40. returndiv;   
  41. }  
  42. //3、绘制覆盖物  
  43. //实现绘制方法  
  44. SquareOverlay.prototype.draw =function(){   
  45. //根据地理坐标转换为像素坐标,并设置给容器  
  46. varposition =this._map.pointToOverlayPixel(this._center);  
  47. this._div.style.left =position.x -this._length /2+”px”;  
  48. this._div.style.top =position.y -this._length /2+”px”;  
  49. }  
  50. //4、显示和隐藏覆盖物  
  51. //实现显示方法  
  52. SquareOverlay.prototype.show =function(){   
  53. if(this._div){   
  54. this._div.style.display =“”;  
  55. }   
  56. }   
  57. //实现隐藏方法  
  58. SquareOverlay.prototype.hide =function(){   
  59. if(this._div){   
  60. this._div.style.display =“none”;  
  61. }   
  62. }  
  63. //5、添加其他覆盖物方法  
  64. //比如,改变颜色  
  65. SquareOverlay.prototype.yellow =function(){   
  66. if(this._div){   
  67. this._div.style.background =“yellow”;}   
  68. }  
  69. //6、自定义覆盖物添加事件方法  
  70. SquareOverlay.prototype.addEventListener =function(event,fun){  
  71. this._div[‘on’+event] =fun;  
  72. }  
  73. //7、添加自定义覆盖物  
  74. varmySquare =newSquareOverlay(map.getCenter(), 100, “red”); 91map.addOverlay(mySquare);  
  75. //8、 为自定义覆盖物添加点击事件  
  76. mySquare.addEventListener(‘click’,function(){  
  77. alert(‘click’);  
  78. });  
  79. </script> 

八、感谢大家支持!

原文链接:http://www.cnblogs.com/milkmap/archive/2011/10/20/2219149.html

【编辑推荐】

  1. 详解百度地图API之地图标注
  2. 百度地图API之如何制作驾车导航
  3. 详解百度地图API之地图操作
  4. 详解百度地图API之自定义地图类型
  5. 怎么成为一个软件架构师
【责任编辑:彭凡 TEL:(010)68476606】

 

9 thoughts on “百度地图API如何给自定义覆盖物添加事件

  1. Pingback: recommended you read

  2. Pingback: ww88

  3. Pingback: custom made slide sandals

  4. Pingback: Whipping Slave

  5. Pingback: website

  6. Pingback: สูตรหวยยี่กี excel

  7. Pingback: cbd oil

  8. Pingback: 카지노사이트

  9. Pingback: pest control

Comments are closed.