[Html]
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312"/>
<Meta name = "keywords" content = "Baidu map, Baidu map API, Baidu map custom tool, Baidu map WYSIWYG tool"/>
<Meta name = "description" content = "Baidu map API custom map to help users generate Baidu map under visualized operations"/>
<Title> Baidu map API custom Map </title>
<! -- Reference Baidu map API -->
<Style type = "text/css">
Html, body {margin: 0; padding: 0 ;}
. Iw_poi_title {color: # CC5522; font-size: 14px; font-weight: bold; overflow: hidden; padding-right: 13px; white-space: nowrap}
. Iw_poi_content {font: 12px arial, sans-serif; overflow: visible; padding-top: 4px; white-space:-moz-pre-wrap; word-wrap: break-word}
</Style>
<Script type = "text/javascript" src = "http://api.map.baidu.com/api? Key = & amp; v = 1.1 & amp; services = true & gt; </script>
</Head>
<Body>
<! -- Baidu map container -->
<Div style = "width: 600px; height: 500px; border: # ccc solid 1px;" id = "dituContent"> </div>
</Body>
<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
// Obtain the coordinate http://dev.baidu.com/wiki/static/map/API/tool/getPoint/
Var point = new BMap. Point (113.025295, 28.211069); // 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: 1 });
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: "languang-enter film world", content: "National Hotline: 400-667-6615 <br/> outlet address: Sanxiang Auto Parts city, Changsha city, district 5 ", point: "113.024954 | 28.211149", isOpen: 1, icon: {w: 23, h: 25, l: 46, t: 21, x: 9, lb: 12 }}
];
// 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 www.2cto.com
Function createIcon (json ){
Var icon = new BMap. icon ("http://map.baidu.com/image/us_cursor.gif", 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>
</Html>