结果如下：

代码如下：

 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&region=青岛&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>

 

版权声明：本文为qing0228原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/qing0228/p/14357679.html