Baidu Map API-Add event method to custom overlay_PHP tutorial-PHP Tutorial-php.cn

This article briefly introduces the application of Baidu Maps. Here I introduce a function that is to add an event method on a layer you set. Please refer to it if necessary.

It is very simple to add events to overlays such as marker, label, circle, etc., just addEventListener directly. So, how to add events for custom overlays? Let’s take a look~

------------------------------------------------ -------------------------------------------------one , define the constructor and inherit Overlay

Copy after login

代码如下	复制代码
// 定义自定义覆盖物的构造函数 function SquareOverlay(center, length, color){ this._center = center; this._length = length; this._color = color; } // 继承API的BMap.Overlay

SquareOverlay.prototype = new BMap.Overlay(); 2. Initialize the custom overlay

Copy after login

代码如下

复制代码

// 实现初始化方法  <br>SquareOverlay.prototype.initialize = function(map){  <br>// 保存map对象实例  <br> this._map = map;      <br> // 创建div元素，作为自定义覆盖物的容器  <br> var div = document.createElement("div");  <br> div.style.position = "absolute";      <br> // 可以根据参数设置元素外观  <br> div.style.width = this._length + "px";  <br> div.style.height = this._length + "px";  <br> div.style.background = this._color;    <br> // 将div添加到覆盖物容器中  <br> map.getPanes().markerPane.appendChild(div);    <br> // 保存div实例  <br> this._div = div;    <br> // 需要将div元素作为方法的返回值，当调用该覆盖物的show、  <br> // hide方法，或者对覆盖物进行移除时，API都将操作此元素。  <br> return div;  <br>}

Copy after login

3. Draw the overlay

Copy after login

代码如下

复制代码

// 实现绘制方法  <br>SquareOverlay.prototype.draw = function(){  <br>// 根据地理坐标转换为像素坐标，并设置给容器 <br> var position = this._map.pointToOverlayPixel(this._center);<br> this._div.style.left = position.x - this._length / 2 + "px";  <br> this._div.style.top = position.y - this._length / 2 + "px";  <br>}

Copy after login

4 , Add overlay

Copy after login

代码如下	复制代码
//添加自定义覆盖物 <br>var mySquare = new SquareOverlay(map.getCenter(), 100, "red"); <br>map.addOverlay(mySquare); Copy after login

5. Add events to custom overlays 1. Display events

Copy after login

代码如下	复制代码
SquareOverlay.prototype.show = function(){ <br> if (this._div){ <br> this._div.style.display = ""; <br> } <br>} Copy after login

After adding the above display overlay event, you only need the following sentence to display the overlay.

Copy after login

代码如下	复制代码
mySquare.show(); Copy after login

2. Hide the overlay

// 实现隐藏方法  <br>

Copy after login

代码如下	复制代码
SquareOverlay.prototype.hide = function(){ if (this._div){ this._div.style.display = "none"; } }

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

mySquare.hide();

Copy after login

3. Change the color of the overlay

Copy after login

代码如下	复制代码
SquareOverlay.prototype.yellow = function(){ <br> if (this._div){ <br> this._div.style.background = "yellow"; <br> } <br>} Copy after login

The above sentence If you want to change the background color of the overlay to yellow, use the following statement to take effect:

mySquare.yellow();

Copy after login

Summary of "Part 5, Adding Events to the Overlay": We added a red overlay on the map. Then add "show, hide, change color" events respectively. The schematic diagram is as follows:

Then, we need to first write the map container and 3 buttons in html.

Copy after login

代码如下

复制代码

<div style="width:520px;height:340px;border:1px solid gray" id="container"></div><br><p><br>    <input type="button" value="移除覆盖物" onclick="mySquare.hide();" /><br>    <input type="button" value="显示覆盖物" onclick="mySquare.show();" /><br>    <input type="button" value="变成黄色" onclick="mySquare.yellow();" /><br></p>

Copy after login

Then, in javascript, add these three functions:

Copy after login

代码如下

复制代码

// 实现显示方法  
SquareOverlay.prototype.show = function(){  <br> if (this._div){  <br>   this._div.style.display = "";  <br> }  <br>}    
// 实现隐藏方法  <br>SquareOverlay.prototype.hide = function(){  
 if (this._div){  
   this._div.style.display = "none";  
 }  
}

//改变颜色的方法
SquareOverlay.prototype.yellow = function(){  <br> if (this._div){  <br>    this._div.style.background = "yellow"; <br> }     <br>}

Copy after login

6. How to add a click event to a custom overlay (This chapter is important! Many people ask) For example, we add a click event to a custom overlay. First, you need to add an addEventListener event. As follows:

Copy after login

代码如下	复制代码
SquareOverlay.prototype.addEventListener = function(event,fun){<br> this._div['on'+event] = fun;<br>} Copy after login

Then write the parameters in the function, such as click. This is the same as the overlay event in Baidu Map API.

Copy after login

代码如下	复制代码
mySquare.addEventListener('click',function(){<br> alert('click');<br>}); Copy after login

Similarly, after adding addEventListener, you can also add other mouse events, such as mouseover.

Copy after login

代码如下	复制代码
mySquare.addEventListener('mousemover',function(){<br> alert('鼠标移上来了');<br>}); Copy after login

7. All source codesCustom overlay

Copy after login

代码如下	复制代码
1 2 3 4 5 自定义覆盖物的点击事件 6 7 8 9 10 11 12 13 14 15 16 17

八、感谢大家支持！API FAQ summary post:http://tieba.baidu.com/p /1147019448