js-百度地图多个标注点是如何实现的

<div class = "demo_main">

 <fieldset class = "demo_content">

 <div class = "min-height:400px; width:100%;" id = "map"></div>

 <script type = "text/javascript">

 var markerArr = [

 {

 title: "名称：锦江区门诊部",
 point: "104.118821,30.642073",
 address: "成都市锦江区通源街188号",
 tel: "028-86712080"

 },

 {
 title: "名称：青羊区门诊部",
 point: "104.000092,30.672099",
 address: "成都市青羊区春晓路15号 ",
 tel: "028-81067120"
 },
 {
 title: "名称：高新区门诊部",
 point: "104.061895,30.556204",
 address: "成都市高新区益州大道中段和天府二街交叉口复城国际T3-2号",
 tel: "028-81067120"
 },

 ];

 var map; //Map实例 
 function map_init() {
 map = new BMap.Map("map");
//第1步：设置地图中心点，成都市 
 var point = new BMap.Point(104.082684, 30.656319);
//第2步：初始化地图,设置中心点坐标和地图级别。 
 map.centerAndZoom(point, 13);
//第3步：启用滚轮放大缩小 
 map.enableScrollWheelZoom(true);
//第4步：向地图中添加缩放控件 
 var ctrlNav = new window.BMap.NavigationControl({
 anchor: BMAP_ANCHOR_TOP_LEFT,
 type: BMAP_NAVIGATION_CONTROL_LARGE
 });
 map.addControl(ctrlNav);
//第5步：向地图中添加缩略图控件 
 var ctrlOve = new window.BMap.OverviewMapControl({
 anchor: BMAP_ANCHOR_BOTTOM_RIGHT,
 isOpen: 1
 });
 map.addControl(ctrlOve);

//第6步：向地图中添加比例尺控件 
 var ctrlSca = new window.BMap.ScaleControl({
 anchor: BMAP_ANCHOR_BOTTOM_LEFT
 });
 map.addControl(ctrlSca);

//第7步：绘制点 
 for(var i = 0; i < markerArr.length; i++) {
 var p0 = markerArr[i].point.split(",")[0];
 var p1 = markerArr[i].point.split(",")[1];
 var maker = addMarker(new window.BMap.Point(p0, p1), i);
 addInfoWindow(maker, markerArr[i], i);
 }
 }

 

// 添加标注 
 function addMarker(point, index) {
 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 - index * 25)
 });
 var marker = new BMap.Marker(point, {
 icon: myIcon
 });
 map.addOverlay(marker);
 return marker;
 }

 

 

// 添加信息窗口 
 function addInfoWindow(marker, poi) {
//pop弹窗标题 
 var title = '<div style="font-weight:bold;color:#CE5521;font-size:14px">' + poi.title + '</div>';
//pop弹窗信息 
 var html = [];
 html.push('<table cellspacing="0" style="table-layout:fixed;width:100%;font:12px arial,simsun,sans-serif"><tbody>');
 html.push('<tr>');
 html.push('<td style="vertical-align:top;line-height:16px;width:38px;white-space:nowrap;word-break:keep-all">地址:</td>');
 html.push('<td style="vertical-align:top;line-height:16px">' + poi.address + ' </td>');
 html.push('</tr>');
 html.push('</tbody></table>');
 var infoWindow = new BMap.InfoWindow(html.join(""), {
 title: title,
 width: 200
 });

 var openInfoWinFun = function() {
 marker.openInfoWindow(infoWindow);
 };
 marker.addEventListener("click", openInfoWinFun);
 return openInfoWinFun;
 }

 

 

//异步调用百度js 
 function map_load() {
 var load = document.createElement("script");
 load.src = "http://api.map.baidu.com/api?v=1.4&callback=map_init";
 document.body.appendChild(load);
 }
 window.onload = map_load;

 </script>

 </fieldset>

</div>

css：

body { margin: 0; font-family: "Helvetica,Arial,FreeSans"; color: #000000; font-size: 12px; } 
.demo_main { padding: 20px; padding-top: 10px; } 
.demo_title { padding: 10px; margin-bottom: 10px; background-color: #D3D8E0; } 
.demo_content { padding: 10px; margin-bottom: 10px; }

js:

<script src="http://www.w3school.com.cn/jquery/jquery.js" type="text/javascript"></script>

效果图：