Create a map

<SCRIPT type = "text/JavaScript">
// Create and initialize map functions:
Function initmap (){
Createmap (); // create a map
Setmapevent (); // sets map events
Addmapcontrol (); // Add a control to the map
Addmarker (); // Add a marker to the map
}

// Create a map function:
Function createmap (){
VaR map = new bmap. Map ("ditucontent"); // create a map in the Baidu map container
VaR point = new bmap. Point (114.40253, 30.48787); // defines a central point coordinate.
Map. centerandzoom (point, 17); // set the center and coordinates of the map and display the map in the map container
Window. Map = map; // store the map variable in the global
}

// Map event setting function:
Function setmapevent (){
Map. enabledragging (); // enables the map drag event. It is enabled by default (not writable)
Map. enablescrollwheelzoom (); // enables zoom in and out of map Rollers
Map. enabledoubleclickzoom (); // enables double-click mouse amplification. It is enabled by default (not writable)
Map. enablekeyboard (); // enable the keyboard to move the map from top to bottom
}

// Map control add function:
Function addmapcontrol (){
// Add a zoom control to the map
VaR ctrl_nav = new bmap. navigationcontrol ({anchor: bmap_anchor_top_left, type: bmap_navigation_control_large });
Map. addcontrol (ctrl_nav );
// Add a thumbnail control to the map
VaR ctrl_ove = new bmap. overviewmapcontrol ({anchor: bmap_anchor_bottom_right, isopen: 0 });
Map. addcontrol (ctrl_ove );
// Add a scale control to the map
VaR ctrl_sca = new bmap. scalecontrol ({anchor: bmap_anchor_bottom_left });
Map. addcontrol (ctrl_sca );
}

// Annotation point Array
VaR markerarr = [{Title: "Wuhan lide Shuren education", content: "My remarks", point: "114.402566 | 30.487979", isopen: 0, icon: {W: 21, H: 21, L: 0, T: 0, x: 6, LB: 5 }}
];
// Create a marker
Function addmarker (){
For (VAR I = 0; I <markerarr. length; I ++ ){
VaR JSON = markerarr [I];
VaR p0 = JSON. Point. Split ("|") [0];
VaR p1 = JSON. Point. Split ("|") [1];
VaR point = new bmap. Point (P0, P1 );
VaR iconimg = createicon (JSON. Icon );
VaR marker = new bmap. Marker (point, {icon: iconimg });
VaR IW = createinfowindow (I );
VaR label = new bmap. Label (JSON. Title, {"offset": New bmap. Size (JSON. Icon. lb-json.icon.x + 10,-20 )});
Marker. setlabel (Label );
Map. addoverlay (Marker );
Label. setstyle ({
Bordercolor: "#808080 ",
Color: & quot; #333 & quot ",
Cursor: "Pointer"
});

(Function (){
VaR Index = I;
VaR _ IW = createinfowindow (I );
VaR _ marker = marker;
_ Marker. addeventlistener ("click", function (){
This. openinfowindow (_ IW );
});
_ IW. addeventlistener ("open", function (){
_ Marker. getlabel (). Hide ();
})
_ IW. addeventlistener ("close", function (){
_ Marker. getlabel (). Show ();
})
Label. addeventlistener ("click", function (){
_ Marker. openinfowindow (_ IW );
})
If (!! JSON. isopen ){
Label. Hide ();
_ Marker. openinfowindow (_ IW );
}
})()
}
}
// Create infowindow
Function createinfowindow (I ){
VaR JSON = markerarr [I];
VaR IW = new bmap. infowindow ("<B class = 'iw _ poi_title 'Title ='" + JSON. title + "'>" + JSON. title + "</B> <Div class = 'iw _ poi_content '>" + JSON. content + "</div> ");
Return IW;
}
// Create an icon
Function createicon (JSON ){
VaR icon = new bmap. icon ("http://app.baidu.com/map//images/us_mk_icon.png", new bmap. size (JSON. w, JSON. h), {imageoffset: New bmap. size (-JSON. l,-JSON. t), infowindowoffset: New bmap. size (JSON. LB + 5, 1), offset: New bmap. size (JSON. x, JSON. h )})
Return icon;
}

Initmap (); // create and initialize a map
</SCRIPT>

Create a map