Baidu Map API (JavaScript)--Highlight the selected administrative divisions

Baidu Map API (JavaScript)--Highlight the selected administrative divisions

var map = new Bmap.map ("Map_container");

function Initmap (map, "Changsha") {
var point = new Bmap.point (112.987402, 28.201509); Create point coordinates 112.987402, 28.201509
Map.centerandzoom (point, 8); Initializes the map, setting the center point coordinates and the map level.
Map.addcontrol (New Bmap.scalecontrol ()); Add a scale control
Map.addcontrol (New Bmap.overviewmapcontrol ()); Add a thumbnail map control
Map.setcenter (CityName); Set the city that the map shows this item must be set
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) {//Acquire administrative area
Map.clearoverlays (); Clear the Map overlay

Add Mask Layer
Train of thought: make use of the collection of administrative points and the custom of periphery to form a ring mask layer
1. Get the collection of selected administrative district border points Rs.boundaries[0]
var STRs = new Array ();
STRs = Rs.boundaries[0].split (";");
var EN = ""; A set of points in the northeast section of administrative divisions
var NW = ""; The collection of the points in the Northwest section of administrative division
var WS = ""; The collection of the southwest point of administrative division
var SE = ""; The collection of points in the southeast section of administrative divisions
var pt_e = strs[0]; Latitude and longitude of the East point of administrative division
var pt_n = strs[0]; Latitude and longitude of the northernmost point of administrative division
var pt_w = strs[0]; Latitude and longitude of the westernmost point of administrative division
var pt_s = strs[0]; Latitude and longitude of the southernmost point of administrative division
var n1 = ""; The easternmost point of Administrative divisions the index position in the point collection
var n2 = ""; The northernmost point of the Administrative Division the index position in the point collection
var n3 = ""; The westernmost point of the Administrative Division the index position in the point collection
var N4 = ""; The southernmost point of Administrative division the index position in the point collection

2. Circulation administrative area border Point collection to find out the longitude and latitude of four points and index position
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_w.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. Draw a set of border points of the northeast, northwest, southwest and southeast four administrative divisions.
if (N1 < N2) {//The first case the easternmost point 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 {//second case the easternmost point 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. Customizing the collection of perimeter border points
var e_jw = "170.672126, 39.623555;"; East
var en_jw = "170.672126, 81.291804;"; Northeast Pt.
var n_jw = "105.913641, 81.291804;"; North
var nw_jw = "-169.604276, 81.291804;"; Northwest Pt.
var w_jw = "-169.604276, 38.244136;"; Xi
var ws_jw = "-169.604276,-68.045308;"; Southwest Pt.
var s_jw = "114.15563,-68.045308;"; South
var se_jw = "170.672126,-68.045308;"; Southeast Pt.
4. Add 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}); Building a polygon overlay
Map.addoverlay (PLY1); The mask is translucent, and if you need a solid color, you can add more layers.
5. Adding a border to the target division is to add a mask layer without fillers to the target division
var ply = new Bmap.polygon (Rs.boundaries[0], {strokeweight:2, Strokecolor: "#ff0000", FillColor: ""});
Map.addoverlay (ply);
Map.setviewport (Ply.getpath ()); Adjust the field of vision
Loadcitymapinfo (map);
});

return map;
}