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;
}