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

摘要：

让客户满意是我们工作的目标，不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户，将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴，公司提供的服务项目有：国际域名空间、网络空间、营销软件、网站建设、青山湖网站维护、网站推广。

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

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

 
 
 
 

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

　　二、初始化自定义覆盖物

 
 
 
 

  
  
  
  
　　//实现初始化方法 
  
  
  
  
　　SquareOverlay.prototype.initialize = function(map){ 
  
  
  
  
　　//保存map对象实例 
  
  
  
  
　　this._map = map; 
  
  
  
  
　　//创建div元素，作为自定义覆盖物的容器 
  
  
  
  
　　vardiv = 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都将操作此元素。 
  
  
  
  
　　returndiv; 
  
  
  
  
　　}
 
 
 
 

　　三、绘制覆盖物

 
 
 
 

  
  
  
  
　　//实现绘制方法 
  
  
  
  
　　SquareOverlay.prototype.draw = function(){ 
  
  
  
  
　　//根据地理坐标转换为像素坐标，并设置给容器 
  
  
  
  
　　varposition = 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"; 
  
  
  
  
　　}
 
 
 
 

　　四、添加覆盖物

 
 
 
 

  
  
  
  
　　//添加自定义覆盖物 
  
  
  
  
　　varmySquare = newSquareOverlay(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个按钮。