Obtain the coordinates of Four Corners in the selection box of the rectangle drawn by the baidumap mouse

Copyright of xueying studio. For more information, see [http://blog.csdn.net/lina791211]

1. Reasons for blog posts

When using the Baidu map open API for development, we encountered a very simple requirement.
→ You need to draw a rectangle on the map and query the data based on the Boundary Value of the rectangle (mainly used in space-time retrieval of satellite data)
I did not think of the Baidu map javascript api I rummaged through Baidu map, and did not find any related operations. I asked du Niang a circle of friends and did not find this requirement. Really sad

2. Implementation Mechanism

Step 1: considering the existing requirements, I chose to use the "Mouse draw" function to search for the desired space range.

The above is the cute demo provided by Baidu.

 

Step 2: perform related modifications. Baidu API does not provide coordinate-related operations, so we need to take advantage of the powerful features and find this parameter.

I believe that since a graph can be painted, the coordinates must be marked out. Otherwise, will it be possible for him to zoom in or zoom out or something that will change freely?

 

Step 3: view the Code provided in the demo, line 1. (What? Where is the Demo code? ----- I won't tell you that there is a line"Source code editor)

// Callback to obtain the covering information var overlaycomplete = function (e) {overlays. push (E. overlay); var result = ""; Result = "<p>"; Result + = E. drawingmode + ":"; if (E. drawingmode = bmap_drawing_marker) {result + = 'coordinate: '+ E. overlay. getposition (). LNG + ',' + E. overlay. getposition (). lat; if ($ ('isinfowindow '). checked) {searchinfowindow. open (E. overlay) ;}} if (E. drawingmode = bmap_drawing_circle) {result + = 'radius: '+ E. overlay. getradius (); Result + = 'center point: '+ E. overlay. getcenter (). LNG + "," + E. overlay. getcenter (). lat;} If (E. drawingmode = bmap_drawing_polyline | E. drawingmode = bmap_drawing_polygon | E. drawingmode = bmap_drawing_rectangle) {result + = 'number of points drawn: '+ E. overlay. getpath (). length;} result + = "</P>"; $ ("showoverlayinfo "). style. display = "NONE"; $ ("Panel "). innerhtml + = result; // output the rendered overlay information to the result panel };

Have you seen the Code in line 2?VaR overlaycomplete = function (E)

 

It uploads a parameter E. Call out the magic of firebug, F12, and so on to arrest the E.

Second, let's look at the 150 rows. Result + = 'number of points drawn: '+ E. Overlay. getpath (). length;

There is a magical E. overlay, so we can also intercept it. Decisive breakpoint interception.

Then draw a graph on the map, and then automatically break the breakpoint to the E position.

The object whose key value is NK contains four coordinates. Okay, after further tests, I found that these four parameters are indeed true.

 

So! The result is displayed. What are the rules of these four parameters? Careful bloggers may have seen some of the explanations in my exposed code !!

VaR olrectpoint = E. Overlay. NK;/**. NK is found from the DOM node of E. Baidu does not provide an introduction to this method. * Olrectpoint coordinate sorting method * ┌ ── ─ ── │ 01 │ 32 │ * └ ── ─ ── ─ done **/var Sw = olrectpoint [3]; // left bottom var Ne = olrectpoint [1]; // upper right console. log ('bottom left: '+ SW. LNG + ',' + SW. lat + 'Upper right: '+ NE. LNG + ',' + NE. LAT );

3. Conclusion

The APIS provided by Baidu map are still user-friendly. Some functions are hidden, so we must look for them slowly. In the future, we will encounter something that JS APIs do not provide. You will not find it. Okay.
If you have any bloggers with better methods, please correct me!

4. Copyright

This blog post belongs:
Iteye: http://snowfigure.iteye.com/

Http://blog.csdn.net/lina791211 (csdn)
The Code involved is open-source, but please mark the source address of the original blog in the main position. Thank you!