參照百度地圖官方例子，實現更改默認圖標，創建多個圖標、標籤、信息窗口，添加鼠標懸停事件、圖標跳動效果，全部代碼如下（重點標記部分見最後的註解）：
HTML：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body, html {
width: 100%;
height: 100%;
margin: 0;
font-family: "微軟雅黑";
}
#allmap {
width: 100%;
height: 780px;
}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密鑰"></script>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<title>給多個點添加信息窗口</title>
</head>
<body>
<div id="allmap"></div>
</body>
</html>JavaScript：
<script type="text/javascript">
// 百度地圖API功能
map = new BMap.Map("allmap");
map.centerAndZoom(new BMap.Point(116.417854, 39.921988), 15); //設置地圖顯示中心點【1】
/*存儲信息集合【2】*/
var data_info = [
[116.417854, 39.921988, "地址：北京市東城區王府井大街88號樂天銀泰百貨八層"],
[116.406605, 39.921585, "地址：北京市東城區東華門大街"],
[116.412222, 39.912345, "地址：北京市東城區正義路甲5號"]
];
/*創建信息窗口*/
var opts = {
width: 250, // 信息窗口寬度
height: 80, // 信息窗口高度
title: "信息窗口", // 信息窗口標題
enableMessage: true //設置允許信息窗發送短息
};
/*遍歷信息集合*/
for (var i = 0; i < data_info.length; i++) {
//創建座標點
var point = new BMap.Point(data_info[i][0], data_info[i][1]);
//更改圖標
var myIcon = new BMap.Icon("http://api.map.baidu.com/img/markers.png", new BMap.Size(23, 25), {
offset: new BMap.Size(10, 25), // 指定定位位置
imageOffset: new BMap.Size(0, 0 - 12 * 25) //設置圖片偏移(這裏選中的第13個,從上往下)【3】
});
//創建標註
var marker = new BMap.Marker(point, { icon: myIcon });
//創建標籤
var label = new BMap.Label("我是標籤" + i, { offset: new BMap.Size(20, -10) });
label.setStyle({
'max-width': 'none' // bootstrap給label默認了一個max-width：100%；這句會影響地圖label的樣式【4】
});
map.addOverlay(marker); // 將標註添加到地圖中
marker.setLabel(label); // 把label設置到maker上
//設置信息窗口內容
var content = data_info[i][2];
map.addOverlay(marker); // 將標註添加到地圖中
addEventHandler(content, marker); // 添加事件
marker.setAnimation(BMAP_ANIMATION_BOUNCE); // 跳動的動畫
}
/*添加marker的事件*/
function addEventHandler(content, marker) {
//鼠標懸停事件
marker.addEventListener("mouseover", function (e) {
openInfo(content, e)
});
}
/*打開信息窗口*/
function openInfo(content, e) {
var p = e.target;
var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
var infoWindow = new BMap.InfoWindow(content, opts); // 創建信息窗口對象
map.openInfoWindow(infoWindow, point); //開啓信息窗口
}
</script>最終效果圖：
下面開始講述容易出現的部分問題：
【1】地圖未顯示自定義座標點？
開始時候，犯了一個特別low的錯誤，從後臺數據庫獲取座標點，運行後一直納悶沒顯示圖標，最後請教別人才知道是自己沒有選好中心點，後臺數據是廣東的位置，中心點卻定在北京，當然是找不到的。如果不知道座標，可以用百度地圖的拾取座標系統http://api.map.baidu.com/lbsapi/getpoint/index.html拾取到想要的中心點座標。
【2】後臺數據集合問題
注意是二維數組，我用ajax從後臺獲取數據是這樣寫的：
//二維數組
var data_info = new Array();
for (var i = 0; i < data.Data.length; i++) {
data_info[i] = new Array();
data_info[i][0] = data.Data[i].LocaltionX; //經度
data_info[i][1] = data.Data[i].LocaltionY; //維度
data_info[i][2] = data.Data[i].content; //信息窗口內容
}【3】更改icon圖標問題
引用百度自己的標註，如果沒深入學過前端CSS，可能還不太明白，這裏可以參考CSS的background-position。
如果是想用自定樣式的話可以自己製作並切圖，具體操作可以百度下“百度地圖icon自定義”等關鍵字。
【4】label標籤問題
如果不寫【4】，效果（“我是標籤0”）如下：
百度後才知道是套用了bookstracp，默認label max-width:100%，所以要改爲none
小白一隻，記錄下學習中遇到的困難，如若有什麼錯誤或問題還望多多指教~