Baidu Map API-Add event method to custom overlay_PHP tutorial

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

代码如下	复制代码
// 定义自定义覆盖物的构造函数 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

代码如下

复制代码

// 实现初始化方法 <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>}

3. Draw the overlay

代码如下	复制代码
// 实现绘制方法 <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>}

4 , Add overlay

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

5. Add events to custom overlays 1. Display events

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

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

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

2. Hide the overlay

// 实现隐藏方法  <br>

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

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

mySquare.hide();

3. Change the color of the overlay

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

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();

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.

代码如下	复制代码
<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>

Then, in javascript, add these three functions:

代码如下	复制代码
// 实现显示方法 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>}

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:

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

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

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

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

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

7. All source codesCustom overlay

代码如下	复制代码
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

http://www.bkjia.com/PHPjc/444736.htmlwww.bkjia.comtruehttp: //www.bkjia.com/PHPjc/444736.htmlTechArticleThis article briefly introduces the application of Baidu Maps. Here I introduce a function that is based on the layer you define. Add an event method above, refer to it if necessary. To marker,...