1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5 <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/> 6 <style type="text/css"> 7 body, html { 8 width: 100%; 9 height: 100%; 10 margin: 0; 11 font-family: "微软雅黑"; 12 } 13 14 #allmap { 15 width: 100%; 16 height: 100%; 17 } 18 19 .BMap_pop { 20 font-size: 12px; 21 color: #ff0000; 22 } 23 24 .link_pop { 25 position: absolute; 26 right: 10px; 27 bottom: 10px; 28 } 29 </style> 30 <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script> 31 <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> 32 <title>给多个点添加信息窗口</title> 33 </head> 34 <body> 35 <div id="allmap"></div> 36 </body> 37 </html> 38 <script type="text/javascript"> 39 // 百度地图API功能 40 map = new BMap.Map("allmap"); 41 map.centerAndZoom(new BMap.Point(116.417854, 39.921988), 15); 42 // map.centerAndZoom("上海"); //以城市设置中心 43 var data_info = [ 44 [116.417854, 39.921988, "地址：北京市东城区王府井大街88号乐天银泰百货八层<a class='link_pop' href='http://www.zth.space/'>点击测试</a>"], 45 [116.406605, 39.921585, "地址：北京市东城区东华门大街"], 46 [116.412222, 39.912345, "地址：北京市东城区正义路甲5号"] 47 ]; 48 var opts = { 49 width: 200, // 信息窗口宽度 50 height: 80, // 信息窗口高度 51 title: "信息窗口", // 信息窗口标题 52 offset: new BMap.Size(6, -10),// 信息窗口坐标偏移量 53 enableMessage: true// 设置允许信息窗发送短息 54 };// 参考 http://developer.baidu.com/map/reference/index.php?title=Class:%E8%A6%86%E7%9B%96%E7%89%A9%E7%B1%BB/InfoWindowOptions 55 var points = [];//坐标点,用于计算中心点和缩放比例 56 for (var i = 0; i < data_info.length; i++) { 57 var point = new BMap.Point(data_info[i][0], data_info[i][1]); 58 points.push(point); 59 var marker = new BMap.Marker(point); // 创建标注 60 var content = data_info[i][2]; 61 map.addOverlay(marker); // 将标注添加到地图中 62 addClickHandler(content, marker); 63 } 64 65 var view = map.getViewport(points);// 获取所有坐标中心点以及缩放比例 66 map.setCenter(view.center);// 设置中心点 67 map.setZoom(view.zoom - 1);// 设置缩放比例 68 function addClickHandler(content, marker) { 69 marker.addEventListener("click", function (e) { 70 openInfo(content, e) 71 } 72 ); 73 } 74 function openInfo(content, e) { 75 var p = e.target; 76 var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat); 77 var infoWindow = new BMap.InfoWindow(content, opts); // 创建信息窗口对象 78 map.openInfoWindow(infoWindow, point); //开启信息窗口 79 } 80 </script>