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

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 ~

Bytes -----------------------------------------------------------------------------------------

1. Define constructors and inherit Overlay

  
  
   

    

     
The code is as follows:
     
Copy code
 
    
 
    

     
// 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:
     
Copy code
 
    
 
    

     
// Implementation initialization method
SquareOverlay. prototype. initialize = function (map ){
// Save the map object instance
This. _ map = map;
// Create a div element as a container for custom covering
Var div = document. createElement ("div ");
Div. style. position = "absolute ";
// You can set the element appearance based on parameters.
Div. style. width = this. _ length + "px ";
Div. style. height = this. _ length + "px ";
Div. style. background = this. _ color;
// Add the div to the covering container
Map. getPanes (). markerPane. appendChild (div );
// Save the div instance
This. _ div = div;
// You need to use the div 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 div;
}
 
    
   
  
3. Create a cover

  
  
   

    

     
The code is as follows:
     
Copy code
 
    
 
    

     
// 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. _ div. style. left = position. x-this. _ length/2 + "px ";
This. _ div. style. top = position. y-this. _ length/2 + "px ";
}
 
    
   
  
4. Add a cover

  
  
   

    

     
The code is as follows:
     
Copy code
 
    
 
    

     
// Add custom overlay
Var mySquare = new SquareOverlay (map. getCenter (), 100, "red ");
Map. addOverlay (mySquare );
 
    
   
  

5. Add an event to the custom cover

1. Display events

  
  
   

    

     
The code is as follows:
     
Copy code
 
    
 
    

     
SquareOverlay. prototype. show = function (){
If (this. _ div ){
This. _ div. style. display = "";
 }  
}
 
    
   
  
After the overlay event is added, you only need the following sentence to display the overlay event.

  
  
   

    

     
The code is as follows:
     
Copy code
 
    
 
    

     
MySquare. show ();
 
    
   
  
2. Hide the covering

// Implement the hidden method

  
  
   

    

     
The code is as follows:
     
Copy code
 
    
 
    

     
SquareOverlay. prototype. hide = function (){
If (this. _ div ){
This. _ div. 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:
     
Copy code
 
    
 
    

     
SquareOverlay. prototype. yellow = function (){
If (this. _ div ){
This. _ div. 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 ();

Summary of "Part 5: adding events to a cover:

We added a red cover to the map and added the "show, hide, and change color" events. The diagram is as follows:

Then, we need to write the map container and three buttons in html.

  
  
   

    

     
The code is as follows:
     
Copy code
 
    
 
    

     
<Div style = "width: 520px; height: 340px; border: 1px solid gray" id = "container"> </div>
<P>
<Input type = "button" value = "remove overlay" onclick = "mySquare. hide ();"/>
<Input type = "button" value = "display cover" onclick = "mySquare. show ();"/>
<Input type = "button" value = "yellow" onclick = "mySquare. yellow ();"/>
</P>
 
    
   
  
Then, add the three functions in javascript:

  
  
   

    

     
The code is as follows:
     
Copy code
 
    
 
    

     

      

       
// Display method
SquareOverlay. prototype. show = function (){
If (this. _ div ){
This. _ div. style. display = "";
 }  
}    
// Implement the hidden method
SquareOverlay. prototype. hide = function (){
If (this. _ div ){
This. _ div. style. display = "none ";
 }  
}

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

        
      
 
    
   
  

VI, How to add click events to custom overlay(This chapter is important! Many people ask)

For example, we give the custom cover click event. First, 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 in the function, such as click. This is the same as the covering event in Baidu Map API.

  
  
   

    

     
The code is as follows:
     
Copy code
 
    
 
    

     
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:
     
Copy code
 
    
 
    

     
MySquare. addEventListener ('mousemover', function (){
Alert ('move the mouse up ');
});
 
    
   
  
VII. All source code

Custom Cover

   
  
    

     

      
The code is as follows:
      
Copy code
 
     
 
     

      
1 <! DOCTYPE html>
2 3 4 <meta http-equiv = "Content-Type" content = "text/html; charset = utf-8"/>
5 <title> click events of custom overlay </title>
6 <script type = "text/javascript" src = "http://api.map.baidu.com/api? V = 1.2 "> </script>
7 8 <body>
9 <div style = "width: 520px; height: 340px; border: 1px solid gray" id = "container"> </div>
10 <p>
11 <input type = "button" value = "remove overlay" onclick = "mySquare. hide ();"/>
12 <input type = "button" value = "display cover" onclick = "mySquare. show ();"/>
13 <input type = "button" value = "yellow" onclick = "mySquare. yellow ();"/>
14 </p>
15 </body>
16 17 <script type = "text/javascript">
18 var map = new BMap. Map ("container"); // create a Map instance
19 var point = new BMap. Point (116.404, 39.915); // create coordinate
20 map. centerAndZoom (point, 15); // initialize the map and set the coordinates of the center and map level.
21
22 // 1. Define the constructor and inherit Overlay
23 // define the constructor of the custom covering
24 function SquareOverlay (center, length, color ){
25 this. _ center = center;
26 this. _ length = length;
27 this. _ color = color;
28}
29 // inherit the BMap. Overlay API
30 SquareOverlay. prototype = new BMap. Overlay ();
31
32 // 2. Initialize the custom cover
33 // implementation initialization method
34 SquareOverlay. prototype. initialize = function (map ){
35 // Save the map object instance
36 this. _ map = map;
37 // Create a div element as a container for custom covering
38 var div = document. createElement ("div ");
39 div. style. position = "absolute ";
40 // you can set the element appearance based on parameters
41 div. style. width = this. _ length + "px ";
42 div. style. height = this. _ length + "px ";
43 div. style. background = this. _ color;
44 // add the div to the covering container
45 map. getPanes (). markerPane. appendChild (div );
46 // Save the div instance
47 this. _ div = div;
48 // you need to use the div element as the return value of the method. When the show,
49 // The hide method, or when the covering is removed, the API will operate on this element.
50 return div;
51}
52
53 // 3. Draw a cover
54 // implementation method
55 SquareOverlay. prototype. draw = function (){
56 // Convert the coordinates to pixel coordinates based on geographic coordinates and set them to the container
57 var position = this. _ map. pointToOverlayPixel (this. _ center );
58 this. _ div. style. left = position. x-this. _ length/2 + "px ";
59 this. _ div. style. top = position. y-this. _ length/2 + "px ";
60}
61
62 // 4. Display and hide the covering
63 // display method
64 SquareOverlay. prototype. show = function (){
65 if (this. _ div ){
66 this. _ div. style. display = "";
67}
68}
69 // implement the hidden method
70 SquareOverlay. prototype. hide = function (){
71 if (this. _ div ){
72 this. _ div. style. display = "none ";
73}
74}
75
76 // 5. Add other covering methods
77 // for example, change the color
78 SquareOverlay. prototype. yellow = function (){
79 if (this. _ div ){
80 this. _ div. style. background = "yellow ";
81}
82}
83
84 // 6. Custom overlay event adding method
85 SquareOverlay. prototype. addEventListener = function (event, fun ){
86 this. _ div ['on' + event] = fun;
87}
88
89 // 7. Add a custom cover
90 var mySquare = new SquareOverlay (map. getCenter (), 100, "red ");
91 map. addOverlay (mySquare );
92
93 // 8. Add a click event for the custom cover
94 mySquare. addEventListener ('click', function (){
95 alert ('click ');
96 });
97 </script>
 
     
    
   
8. Thank you for your support!

Api faq summary:Http://tieba.baidu.com/p/1147019448