1. Go to: http://dev.baidu.com/wiki/static/map/API/tool/creatMap/ (Create a map-Baidu Map API WYSIWYG tool, Baidu official address, please rest assured)
2. Switch cities and search for marked locations. (Such as:)
3.Set the map: You can set the width and height of the map displayed on the website, and the rest of the options remain unchanged.
4.Add callouts: After clicking the first icon, find your position on the right and click the left mouse button to locate it. The shape of the icon can be changed at the mark icon, and the name and remarks can be filled in with relevant information. (Such as:)
5.After completing the above 4 steps, click Get Code.
6.The acquisition code is as follows: (Note: Usually we only need to insert the following code in the web page, the bug is marked out, and the rest can be omitted.)
1. Insert the following code between <head> </ head>: This is the style and JS script.
<!-Quoting 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=&v=1.1&services=true"> </ script>
2. Place the following code at the position where the map needs to be displayed between <body> </ body>: (this code calls the map)
<!-Baidu Map Container->
<div style = "width: 697px; height: 550px; border: #ccc solid 1px;" id = "dituContent"> </ div>
3. The following code is placed at the bottom of the page (actually, it can be placed anywhere on the page.)
<script type = "text / javascript">
// Create and initialize map functions:
function initMap () {
createMap (); // Create a map
setMapEvent (); // Set the map event
addMapControl (); // Add a control to the map
addMarker (); // Add a marker to the map
}
// Create map function:
function createMap () {
var map = new BMap.Map ("dituContent"); // Create a map in Baidu map container
var point = new BMap.Point (115.949652,28.693851); // Define a center point coordinate
map.centerAndZoom (point, 18); // Set the center point and coordinates of the map and display the map in the map container
window.map = map; // Map variables are stored globally
}
// Map event setting function:
function setMapEvent () {
map.enableDragging (); // Enable map drag event, enabled by default (may not be written)
map.enableScrollWheelZoom (); // Enable the map wheel to zoom in and out
map.enableDoubleClickZoom (); // Enable double-click to zoom in by mouse, enabled by default (may not be written)
map.enableKeyboard (); // Enable the keyboard to move the map
}
// 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);
}
// label point array
var markerArr = [{title: "Baiheng Network", content: "Phone: 0791-88117053 <br/> Mobile: 15079002975", point: "115.950312 | 28.693447", isOpen: 1, icon: {w: 23, h : 25, l: 46, t: 21, x: 9, lb: 12})
];
// Create 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: "# 333",
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://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 the map
</ script>
Of course, if you want to be lazy, it ’s okay to put the above corresponding code between <body> </ body>, haha
