百度地图上添加多个标记，标记上添加信息展示窗口、跳转到导航界面
结果如下：
代码如下：
1 <html lang="en">
2 <head>
3 <title>地图上瞄点</title>
4 <metcharset=utf-8">
5 <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=此处替换为自己在百度地图api中申请的ak值&s=1"></script>
6 </head>
7 <body style="background:#CBE1FF">
8 <div style="width:730px;margin:auto;">
9 <div id="container"
10 style="width: 730px;height: 680px;border: 1px solid gray;">
11 </div>
12 </div>
13 </body>
14 <script type="text/javascript">
15 var map = new BMap.Map("container");
16 // map.centerAndZoom("青岛", 10);
17 map.centerAndZoom(new BMap.Point(120.32,36.39),10)
18 map.enableScrollWheelZoom(); //启用滚轮放大缩小，默认禁用
19 map.enableContinuousZoom(); //启用地图惯性拖拽，默认禁用
20
21 map.addControl(new BMap.NavigationControl()); //添加默认缩放平移控件
22 map.addControl(new BMap.OverviewMapControl()); //添加默认缩略地图控件
23 map.addControl(new BMap.OverviewMapControl({ isOpen: true, anchor: BMAP_ANCHOR_BOTTOM_RIGHT })); //右下角，打开
24
25 var localSearch = new BMap.LocalSearch(map);
26 localSearch.enableAutoViewport(); //允许自动调节窗体大小
27
28
29 function searchByStationName() {
30 var index = '';
31 map.clearOverlays();//清空原来的标注
32 var keyword =['青岛市民中心（市南区福州南路17,27号）',
33 '市北区敦化路328号诺德广场A座5楼',
34 '李沧区京口路47号百通大厦7楼',
35 '崂山区海尔路182-8号半岛国际大厦5楼',
36 '城阳区正阳路205号B座6楼',
37 '黄岛区长江东路313号',
38 '黄岛区双珠路399号光大商务中心3楼',
39 '即墨区蓝鳌路788号德馨大厦3楼',
40 '胶州市澳门路333号天泰金融广场4号楼10楼',
41 '平度市红旗路23号鼎峰大厦6楼',
42 '莱西市长岛路156号交通银行3楼'];
43 localSearch.setSearchCompleteCallback(function (searchResult) {
44 var poi = searchResult.getPoi(0);
45 //输出poi，可根据poi中的值进行获取标记点的经纬度等内容。
46 console.log(poi)
47
48 // map.centerAndZoom(poi.point, 10); //可根据标记修改地图的中心和zoom大小；
49 var marker = new BMap.Marker(new BMap.Point(poi.point.lng, poi.point.lat)); // 创建标记
50 map.addOverlay(marker);
51
52 marker.addEventListener("click", function () {
53 //content中为展示信息窗口中的内容
54 var content = poi.title + "<br/><br/>经度：" + poi.point.lng + "<br/>纬度：" + poi.point.lat;
55 var infoWindow = new BMap.InfoWindow("<p style='font-size:14px;'>" + content + "</p>");
56 //打开信息窗口
57 this.openInfoWindow(infoWindow);
58 //进入导航页面，现起始点是已知的，未进行定位操作，第一个origin后为起始点，destination后为导航的终点，第二个origin后为所在城市
59 // window.open(encodeURI("http://api.map.baidu.com/direction?origin=中山公园&destination="+ poi.title +"&mode=driving®ion=青岛&output=html&src=webapp.baidu.openAPIdemo"),'_blank');
60 });
61 //marker跳动的动画
62 // marker.setAnimation(BMAP_ANIMATION_BOUNCE);
63 });
64
65 // localSearch.search(keyword);//当标记点为一个点，keyword为位置字符串
66
67 //标记点为多个点，keyword为列表。
68 for(var i = 0; i< keyword.length;i ++){
69 index = i;
70 localSearch.search(keyword[i]);
71 }
72 }
73
74 //调用函数，在地图上添加marker标记
75 searchByStationName();
76 </script>
77 </html>
