Baidu Map api-Add event methods to custom overlays _php tutorial

This article briefly introduces the application of Baidu map, here I introduce a function is in their own layer to add an event method, there is a need for reference.

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.

-----------------------------------------------------------------------------------------One, define constructors and inherit overlay

 
  
  
  
  
   
   
 
    
 
     
The code is as follows
 
     
Copy Code
 
    
 
    
 
     







 
    
 
   
 
  
  
Squareoverlay.prototype = new Bmap.overlay ();

Ii. Initializing a custom overlay

 
 
  
  
  
 
   
 
    
 code as follows 
 
    
 copy code 
 
   
 
   
 
    
      Implement initialization method 
 SquareOverlay.prototype.initialize = function (map) {
//Save Map Object instance 
 This._map = map;  
//Create DIV elements as containers for custom overlays 
 var div = document.createelement ("div");      
 Div.style.position = "absolute";  
//You can set the element appearance according to the 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);    
//Save div instance 
 This._div = div;  
//The DIV element needs to be the return value of the method, and the API will manipulate this element when the show, 
/Hide method for the overlay is called, or when the overlay is removed.  
 Return div; 
} 
 
 
   
 
  
 
 
Iii. drawing of covering material

 
  
  
  
  
   
   
 
    
 
     
The code is as follows
 
     
Copy Code
 
    
 
    
 
     
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

 
  
  
  
  
   
   
 
    
 
     
The code is as follows
 
     
Copy Code
 
    
 
    
 
     
Add a custom overlay  
var mysquare = new Squareoverlay (Map.getcenter (), +, "red");  
Map.addoverlay (MySQUARE);
 
    
 
   
 
  
  

v. Add an event to a custom overlay1. Show events

 
  
  
 
   
   
 
    
 
     
 code as follows 
 
     
 copy code 
 
    
 
    
 
     
< Pre class= "brush:php;toolbar:false" >squareoverlay.prototype.show = function () {
 if (this._div) {
 This._div.sty Le.display = ""; 
} 
} 
 
    
 
   
 
  
  
 After adding the above show overlay event, you can display the overlay with the following sentence. 

 
  
  
 
   
   
 
    
 
     
 code as follows 
 
     
 copy code 
 
    
 
    
 
     
< Pre class= "Brush:php;toolbar:false" >mysquare.show (); 
 
    
 
   
 
  
  
 2, hidden overlays 

Implementing Hidden methods  

 
  
  
  
  
   
   
 
    
 
     
The code is as follows
 
     
Copy Code
 
    
 
    
 
     




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

Mysquare.hide ();

3. Change the color of the cover

 
  
  
  
  
   
   
 
    
 
     
The code is as follows
 
     
Copy Code
 
    
 
    
 
     
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 ();

"Part fifth, adding events to coverings" Summary: We added a red overlay on the map, and then added "show, hide, change color" events. As follows: So, we need to write the map container, and 3 buttons in the HTML first.

 
  
  
 
   
   
 
    
 
     
 code as follows 
 
     
 copy code 
 
    
 
    
 
     
< Pre class= "Brush:php;toolbar:false" > 
 
 
  
  
  
 
 
 
    
 
   
 
  
  
 Then, in JavaScript, add these three functions: 

 
  
  
 
   
   
 
    
 
     
 code as follows 
 
     
 copy code 
 
    
 
    
 
     
< Pre class= "Brush:php;toolbar:false" >//Implementation Display method 
 SquareOverlay.prototype.show = function () {
 if (this._div) {
 This._div.style.display = ""; 
} 
} 
//Implement hidden method 
 SquareOverlay.prototype.hide = function () {
 if (this._div) {
 This._div.sty Le.display = "None"; 
} 
} 
 
//methods for changing colors 
 SquareOverlay.prototype.yellow = function () {
 if (this._div) {
 This._div.st Yle.background = "Yellow"; 
} 
} 
 
    
 
   
 
  
  
 

Six How to add a click event to a custom overlay(This chapter is important!) Many people ask) for example, we give custom overlays a click event. First, you need to add an AddEventListener event. As follows:

 
  
  
  
  
   
   
 
    
 
     
The code is as follows
 
     
Copy Code
 
    
 
    
 
     
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.

 
  
  
 
   
   
 
    
 
     
 code as follows 
 
     
 copy code 
 
    
 
    
 
     
< Pre class= "Brush:php;toolbar:false" >mysquare.addeventlistener (' click ', Function () {
 Alert (' click '); 
}); 
 
    
 
   
 
  
  
 Similarly, after you add AddEventListener, you can add other mouse events, such as MouseOver. 

 
  
  
  
  
   
   
 
    
 
     
The code is as follows
 
     
Copy Code
 
    
 
    
 
     
Mysquare.addeventlistener (' Mousemover ', function () {
    Alert (' Mouse moved up ');
});
 
    
 
   
 
  
  
Seven, all source code

Custom Overlays

 
  
  
  
  
   
   
 
    
 
     
The code is as follows
 
     
Copy Code
 
    
 
    
 
     



4 
Click events for Custom Overlays











 
    
 
   
 
  
  
Eight, thank you for your support!

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

http://www.bkjia.com/PHPjc/444736.html www.bkjia.com true http://www.bkjia.com/PHPjc/444736.html techarticle This article briefly introduces the application of Baidu map, here I introduce a function is in their own layer to add an event method, there is a need for reference. To marker 、...

