Baidu Map API-add an event method to a custom cover _ PHP Tutorial

Baidu Map API-add an event method to a custom cover. This article briefly introduces the application of Baidu Map. here I will introduce a function to add an event method on my own layer. For more information, see. This article briefly introduces the application of Baidu Map to marker. here I will introduce an event method on my own layer. For more information, see.

Adding events to Overlay such as marker, lable, and circle is simple. you can directly add addEventListener. So how should I add a custom covering event? Let's take a look ~

Objective 1. define constructors and inherit Overlay

 
 
  
  
  
 
   
 
    
The code is as follows:
 
    
 
 
   
 
   
 
    
// Define the constructor of the custom covering
Function SquareOverlay (center, length, color ){
This. _ center = center;
This. _ length = length;
This. _ color = color;
}
// Inherit the BMap. Overlay API
 
   
 
  
 
 
SquareOverlay. prototype = new BMap. Overlay ();

II. initialize custom overlay

 
 
  
  
  
 
   
 
    
The code is as follows:
 
    
 
 
   
 
   
 
    
// Implementation initialization method
SquareOverlay. prototype. initialize = function (map ){
// Save the map object instance
This. _ map = map;
// Create A p element as the container for custom covering
Var p = document. createElement ("p ");
P. style. position = "absolute ";
// You can set the element appearance based on parameters.
P. style. width = this. _ length + "px ";
P. style. height = this. _ length + "px ";
P. style. background = this. _ color;
// Add p to the covering container
Map. getPanes (). markerPane. appendChild (p );
// Save the p instance
This. _ p = p;
// Use the p element as the return value of the method. when the show,
// The hide method, or when the covering is removed, the API will operate on this element.
Return p;
}
 
   
 
  
 
 
3. create a cover

 
 
  
  
  
 
   
 
    
The code is as follows:
 
    
 
 
   
 
   
 
    
// Implementation method
SquareOverlay. prototype. draw = function (){
// Convert the coordinates to pixel coordinates based on geographic coordinates and set them to the container
Var position = this. _ map. pointToOverlayPixel (this. _ center );
This. _ p. style. left = position. x-this. _ length/2 + "px ";
This. _ p. style. top = position. y-this. _ length/2 + "px ";
}
 
   
 
  
 
 
4. add a cover

 
 
  
  
  
 
   
 
    
The code is as follows:
 
    
 
 
   
 
   
 
    
// Add custom overlay
Var mySquare = new SquareOverlay (map. getCenter (), 100, "red ");
Map. addOverlay (mySquare );
 
   
 
  
 
 

5. add an event to the custom cover1. display events

 
 
  
  
  
 
   
 
    
The code is as follows:
 
    
 
 
   
 
   
 
    
SquareOverlay.prototype.show = function(){  
 if (this._p){  
   this._p.style.display = "";  
 }  
}
 
   
 
  
 
 
After the overlay event is added, you only need the following sentence to display the overlay event.

 
 
  
  
  
 
   
 
    
The code is as follows:
 
    
 
 
   
 
   
 
    
mySquare.show();
 
   
 
  
 
 
2. hide the covering

// Implement the hidden method

 
 
  
  
  
 
   
 
    
The code is as follows:
 
    
 
 
   
 
   
 
    
SquareOverlay. prototype. hide = function (){
If (this. _ p ){
This. _ p. style. display = "none ";
}
}
 
   
 
  
 
 
After the preceding code is added, you only need to use this sentence to hide the overlay.

mySquare.hide();

3. change the covering color.

 
 
  
  
  
 
   
 
    
The code is as follows:
 
    
 
 
   
 
   
 
    
SquareOverlay.prototype.yellow = function(){  
 if (this._p){  
    this._p.style.background = "yellow"; 
 }     
}
 
   
 
  
 
 
In the above sentence, the background color of the covering is changed to yellow. use the following statement to take effect:

mySquare.yellow();

"Part 5: add events to the cover" Summary: We add a red cover on the map, and then add the "show, hide, and change colors" events respectively. As follows: in html, we need to write the map container and three buttons first.

 
 
  
  
  
 
   
 
    
The code is as follows:
 
    
 
 
   
 
   
 
    


    
    
    
 
   
 
  
 
 
Then, add the three functions in javascript:

 
 
  
  
  
 
   
 
    
The code is as follows:
 
    
 
 
   
 
   
 
    
// Display method
SquareOverlay. prototype. show = function (){
If (this. _ p ){
This. _ p. style. display = "";
}
}
// Implement the hidden method
SquareOverlay. prototype. hide = function (){
If (this. _ p ){
This. _ p. style. display = "none ";
}
}

// How to change the color
SquareOverlay. prototype. yellow = function (){
If (this. _ p ){
This. _ p. style. background = "yellow ";
}
}
 
 
   
 
  
 
 

VI, How to add click events to custom overlay(This chapter is important! For example, we define a click event for a custom cover. First, add an addEventListener event. As follows:

 
 
  
  
  
 
   
 
    
The code is as follows:
 
    
 
 
   
 
   
 
    
SquareOverlay.prototype.addEventListener = function(event,fun){
    this._p['on'+event] = fun;
}
 
   
 
  
 
 
Then write the parameters in the function, such as click. This is the same as the covering event in Baidu Map API.

 
 
  
  
  
 
   
 
    
The code is as follows:
 
    
 
 
   
 
   
 
    
mySquare.addEventListener('click',function(){
    alert('click');
});
 
   
 
  
 
 
Similarly, after addEventListener is added, you can add other mouse events, such as mouseover.

 
 
  
  
  
 
   
 
    
The code is as follows:
 
    
 
 
   
 
   
 
    
MySquare. addEventListener ('mousemover', function (){
Alert ('move the mouse up ');
});
 
   
 
  
 
 
VII. all source code

Custom Cover

 
 
  
  
  
 
   
 
    
The code is as follows:
 
    
 
 
   
 
   
 
    
1
2
3
4 
5Click events of custom overlay
6