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
3. Draw the overlay
4 , Add overlay
5. Add events to custom overlays 1. Display events
代码如下 | 复制代码 |
1 | 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.
2. Hide the overlay
代码如下 | 复制代码 |
SquareOverlay.prototype.hide = function(){ if (this._div){ this._div.style.display = "none"; } } |
添加完以上code,只需使用这句话,即可隐藏覆盖物。
3. Change the color of the overlay
代码如下 | 复制代码 |
1 | 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:
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:
![](http://www.bkjia.com/uploadfile/2013/0905/20130905072612908.jpg)
Then, we need to first write the map container and 3 buttons in html.
代码如下 | 复制代码 |
1 | <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:
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:
代码如下 | 复制代码 |
1 | 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.
代码如下 | 复制代码 |
1 | 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.
代码如下 | 复制代码 |
1 | mySquare.addEventListener( 'mousemover' , function (){<br> alert( '鼠标移上来了' );<br>});
|
Copy after login |
7. All source codesCustom overlay
八、感谢大家支持!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,...