"Baidu Map API" How to add events to custom overlays

Http://www.cnblogs.com/milkmap/archive/2011/10/20/2219149.html

Summary:

To marker, lable, circle and other overlay add events is simple, direct addeventlistener can be. So, how should the event of a custom overlay be added? Let's have a look.

-----------------------------------------------------------------------------------------

First, define constructors and inherit overlay

Define a constructor for a custom overlay  
function Squareoverlay (center, length, color) {  
This._center = center;  
this._length = length;  
This._color = color;  
}  
Bmap.overlay of the inherited API  

Ii. Initializing a custom overlay

Implementing the Initialization method  
SquareOverlay.prototype.initialize = function (map) {  
Save a Map object instance  
This._map = map;      
Create DIV elements as containers for custom overlays  
var div = document.createelement ("div");  
Div.style.position = "absolute";      
Element appearance can be set according to parameters  
Div.style.width = this._length + "px";  
Div.style.height = this._length + "px";  
Div.style.background = This._color;    
Add div to the overlay container  
Map.getpanes (). Markerpane.appendchild (Div);    
Saving Div Instances  
This._div = div;    
You need to use the DIV element as the return value of the method, when you call the overlay's show,  
Hide method, or when the overlay is removed, the API will manipulate this element.  
return div;  
}

Iii. drawing of covering material

Implementing a Drawing method  
SquareOverlay.prototype.draw = function () {  

var position = 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";  
}

Iv. adding covering material

Add a custom overlay  
var mysquare = new Squareoverlay (Map.getcenter (), +, "red");  
Map.addoverlay (MySQUARE);

V. Add an event to a custom overlay

1. Show events

SquareOverlay.prototype.show = function () {  
if (this._div) {  
   This._div.style.display = "";  
}  

After adding the above overlay event, only the following sentence is required to display the overlay.

Mysquare.show ();

2, hidden cover

Implementing Hidden methods  
SquareOverlay.prototype.hide = function () {  
if (this._div) {  
   This._div.style.display = "None";  
}  
}

Add the above code, just use this sentence, you can hide the cover.

Mysquare.hide ();

3. Change the color of the cover

SquareOverlay.prototype.yellow = function () {  
if (this._div) {  
    
}     
}

The above sentence is to change the background color of the cover to yellow, using the following statement can be effective:

Mysquare.yellow ();

Summary of "part fifth, adding events to coverings":

We added a red overlay to the map, and then added "show, hide, change color" events respectively. As follows:

So, we need to write the map container, and 3 buttons in the HTML first.

<div style= "width:520px;height:340px;border:1px solid Gray" id= "container" ></div>
<p>
    <input type= "button" value= "Remove cover" onclick= "mysquare.hide ();"/>
    <input type= "button" value= "Show Overlay" onclick= "mysquare.show ();"/>
    <input type= "button" value= "Turns yellow" onclick= "mysquare.yellow ();"/>
</p>

Then, in JavaScript, add these three functions:

Implementing Display Methods  
SquareOverlay.prototype.show = function () {  
if (this._div) {  
   This._div.style.display = "";  
}  
}    
Implementing Hidden methods  
SquareOverlay.prototype.hide = function () {  
if (this._div) {  
   This._div.style.display = "None";  
}  
}

Ways to change colors
SquareOverlay.prototype.yellow = function () {  
if (this._div) {  
    
}     
}

Vi. How to add a click event to a custom overlay (This chapter is important!) A lot of people ask)

For example, we give a custom overlay a click event. First, you need to add an AddEventListener event. As follows:

SquareOverlay.prototype.addEventListener = function (event,fun) {
    this._div[' on ' +event] = fun;
}

Then write the parameters inside the function, such as Click. This is the same as the cover event in the Baidu map API.

Mysquare.addeventlistener (' click ', function () {
    Alert (' click ');
});

Similarly, after adding AddEventListener, you can add other mouse events, such as MouseOver.

Mysquare.addeventlistener (' Mousemover ', function () {
    Alert (' Mouse moved up ');
});

Seven, all source code

Custom Overlays

Eight, thank you for your support!

API FAQ Summary Sticker: http://tieba.baidu.com/p/1147019448

"Baidu Map API" How to add events to custom overlays