Baidu map API (JavaScript)-highlight selected administrative divisions

Source: Internet
Author: User

Baidu map API (JavaScript) -- highlight the selected administrative region

VaR map = new bmap. Map ("map_container ");

Function initmap (MAP, "Changsha City "){
VaR point = new bmap. Point (112.987402, 28.201509 );
// Create coordinate 112.987402, 28.201509
Map. centerandzoom (point, 8); // initialize the map and set the coordinates of the center and map level.
Map. addcontrol (New bmap. scalecontrol ());
// Add a scale control
Map. addcontrol (New bmap. overviewmapcontrol ());
// Add a thumbnail map control
Map. setcenter (cityname); // you must set the city to which the map is displayed.
Map. enablescrollwheelzoom ();
Map. addcontrol (New bmap. navigationcontrol ({type: bmap_navigation_control_large, anchor: bmap_anchor_top_left, offset: New bmap. Size (40,250 )}));
VaR bdary = new bmap. Boundary ();
Bdary. Get (cityname, function (RS) {// obtain the Administrative Region

Map. clearoverlays (); // clear the map covering

// Add a Mask Layer
// Train of thought: A ring mask layer is formed by using the collection of administrative points and the peripheral custom Southeast-northwest China.
// 1. Obtain the Rs. boundaries set of the border points of the selected administrative area [0]
VaR STRs = new array ();
STRs = Rs. Boundaries [0]. Split (";");
VaR en = ""; // set of the Northeast region of the administrative area
VaR nw = ""; // set of the Northwest segment of the administrative area
VaR Ws = ""; // set of Southwest Administrative Region points
VaR Se = ""; // set of southeast points of administrative divisions
VaR pt_e = STRs [0]; // the longitude and latitude of the eastmost point of the administrative area
VaR pt_n = STRs [0]; // the longitude and latitude of the northern point of the administrative area
VaR pt_w = STRs [0]; // the longitude and latitude of the West-most point of the administrative area
VaR pt_s = STRs [0]; // the longitude and latitude of the southernmost point of the administrative area
VaR n1 = ""; // The index position of the east-most point of the administrative division in the vertex set
VaR n2 = ""; // The index position of the northern point of the administrative area in the vertex set
VaR N3 = ""; // The index position of the West Point of the administrative division in the vertex set
VaR N4 = ""; // The index position of the southmost point in the point set in the administrative area

// 2. Find the longitude and latitude of the four points in the Southeast and northwest of the circular administrative area and the index location.
For (VAR n = 0; n <STRs. length; n ++ ){
VaR pt_e_f = parsefloat (pt_e.split (",") [0]);
VaR pt_n_f = parsefloat (pt_n.split (",") [1]);
VaR pt_w_f = parsefloat (pt_1_split (",") [0]);
VaR pt_s_f = parsefloat (pt_s.split (",") [1]);

VaR SPT = new array ();
Try {
SPT = STRs [N]. Split (",");
VaR spt_j = parsefloat (SPT [0]);
VaR spt_w = parsefloat (SPT [1]);
If (pt_e_f <spt_j ){
// East
Pt_e = STRs [N];
Pt_e_f = spt_j;
N1 = N;
}
If (pt_n_f <spt_w) {// north
Pt_n_f = spt_w;
Pt_n = STRs [N];
N2 = N;
}

If (pt_w_f> spt_j) {// West
Pt_w_f = spt_j;
Pt_w = STRs [N];
N3 = N;
}
If (pt_s_f> spt_w) {// south
Pt_s_f = spt_w;
Pt_s = STRs [N];
N4 = N;
}
}
Catch (ERR ){
Alert (ERR );
}
}
// 3. Obtain the set of border points of the four administrative divisions in northeast China, northwest China, southwest China, and Southeast China.
If (N1 <N2) {// In the first case, the eastmost point is in front of the index.
For (VAR o = N1; O <= n2; O ++ ){
En + = STRs [O] + ";"
}
For (VAR o = n2; O <= N3; O ++ ){
NW + = STRs [O] + ";"
}
For (VAR o = N3; O <= N4; O ++ ){
WS + = STRs [O] + ";"
}
For (VAR o = N4; O <STRs. length; O ++ ){
Se + = STRs [O] + ";"
}
For (VAR o = 0; O <= N1; O ++ ){
Se + = STRs [O] + ";"
}
}
Else {// In the second case, the eastmost point is behind the index.
For (VAR o = N1; O <STRs. length; O ++ ){
En + = STRs [O] + ";"
}
For (VAR o = 0; O <= n2; O ++ ){
En + = STRs [O] + ";"
}
For (VAR o = n2; O <= N3; O ++ ){
NW + = STRs [O] + ";"
}
For (VAR o = N3; O <= N4; O ++ ){
WS + = STRs [O] + ";"
}
For (VAR o = N4; O <= N1; O ++ ){
Se + = STRs [O] + ";"
}
}
// 4. Customize the set of peripheral border points
VaR e_jw = "170.672126, 39.623555 ;";
// East
VaR en_jw = "170.672126, 81.291804;"; // northeast corner
VaR n_jw = "105.913641, 81.291804;"; // north
VaR nw_jw = "-169.604276, 81.291804;"; // northwest corner
VaR w_jw = "-169.604276, 38.244136;"; // West
VaR ws_jw = "-169.604276,-68.045308;"; // southwest corner
VaR s_jw = "114.15563,-68.045308 ;";
// South
VaR se_jw = "170.672126,-68.045308 ;";
// Southeast corner
// 4. Add a ring Mask Layer
VaR ply1 = new bmap. polygon (En + NW + WS + Se + e_jw + se_jw + s_jw + ws_jw + w_jw + nw_jw + en_jw + e_jw, {strokecolor: "NONE", fillcolor: "RGB (246,246,246) ", strokeopacity: 0 });
// Create a polygon covering
Map. addoverlay (ply1); // The mask is translucent. You can add multiple layers if you need a solid color.
// 5. Add a border to the target administrative area. In fact, it is to add a mask layer without padding to the target administrative area.
VaR ply = new bmap. polygon (Rs. Boundaries [0], {strokeweight: 2, strokecolor: "# ff0000", fillcolor :""});
Map. addoverlay (ply );
Map. setviewport (ply. getpath (); // adjust the field of view
Loadcitymapinfo (MAP );
});

Return map;
}

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.