代碼目錄結構（圖片按對應命名保存）
1.png
pin.png
效果
代碼
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>百度地圖 API marker</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.3, user-scalable=no">
<meta name="description" content="百度地圖 API marker">
<meta name="keywords" content="百度 API">
<meta name="author" content="wg">
<style>
html,body,#map{
height: 100%;
width: 100%;
margin: 0;
}
</style>
<script src="http://api.map.baidu.com/api?v=1.4"></script>
<script src="http://api.map.baidu.com/library/LuShu/1.2/src/LuShu_min.js"></script>
<body>
<div id="map"></div>
<script>
var map = new BMap.Map("map");//創建Map實例
map.enableScrollWheelZoom(true);//開啓鼠標滾輪縮放
map.centerAndZoom(new BMap.Point(108.99059, 34.27563), 15);//聲明地圖中心點和縮放級別
var data = [//假設這個數據是從後臺獲取的json數據
{latitude: 34.27563, longitude: 108.99059,stationType: 01,message:'123',address:'康復路'},
{latitude: 34.276365, longitude: 108.980291,stationType: 00,message:'234',address:'朝陽門'},
{latitude: 34.276361, longitude: 108.969296,stationType: 00,message:'345',address:'五路口'},
{latitude: 34.276164, longitude: 108.953575,stationType: 00,message:'456',address:'北大街'},
{latitude: 34.287457, longitude: 108.953593,stationType: 00,message:'567',address:'安遠門'}
];
for(var i=0;i<data.length;i++){//遍歷數據
if (data[i].stationType==01){
addIcon(data[i].longitude,data[i].latitude,'1.png',data[i].message,data[i].address);
}else if(data[i].stationType==00){
addIcon(data[i].longitude,data[i].latitude,'pin.png',data[i].message,data[i].address);
}
}
//參數座標、圖片（這裏寫的相對路徑，圖片和html在相同路徑，只寫圖片名）、需要的信息
function addIcon(lat,lng,img,msg,address){
//創建Point實例
var point = new BMap.Point(lat,lng);
//創建Icon實例
var icon = new BMap.Icon(img, new BMap.Size(50, 32), {
anchor: new BMap.Size(10, 30)
});
//創建Marker實例，並添加Point和Icon
var mkr =new BMap.Marker(point, {
icon: icon
});
var opts = {
width : 200, // 信息窗口寬度
height: 100, // 信息窗口高度
title : '<h4>地址：</h4>' , // 信息窗口標題
enableMessage:false,//設置允許信息窗發送短息
message: msg
}
//創建信息窗口實例
var infoWindow = new BMap.InfoWindow(address,opts);
mkr.addEventListener("click", function(){
map.openInfoWindow(infoWindow,point); //開啓信息窗口
});
map.addOverlay(mkr);//添加Marker到地圖上
}
</script>
</body>
</html>