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.
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 codeCustom Cover
The code is as follows: |
|
1 2 3 4 5Click events of custom overlay 6 |