1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <style type="text/css"> 6 body, html { 7 width: 100%; 8 height: 100%; 9 overflow: hidden; 10 margin: 0; 11 } 12 13 #allmap { 14 height: 100%; 15 overflow: hidden; 16 } 17 </style> 18 <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=yqYfrk8ClmehOV743RST9c8Z"></script> 19 <script type="text/javascript" src="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.js"></script> 20 <link rel="stylesheet" href="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.css" /> 21 22 <title>SearchInfoWindow</title> 23 </head> 24 <body> 25 <div id="allmap" style="overflow:hidden;zoom:1;position:relative;"> 26 <div id="map" style="height:100%;-webkit-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;"></div> 27 </div> 28 <script type="text/javascript"> 29 30 // 百度地图API功能 31 var map = new BMap.Map(‘map‘); 32 var poi = new BMap.Point(116.307852, 40.057031); 33 map.centerAndZoom(poi, 16); 34 map.enableScrollWheelZoom(); 35 36 var content = ‘<div style="margin:0;line-height:20px;padding:2px;">‘ + 37 ‘<img src="/image/logo.png" style="float:right;zoom:1;overflow:hidden;width:100px;height:100px;margin-left:3px;"/>‘ + 38 ‘地址：北京市海淀区上地十街10号<br/>电话：(010)59928888<br/>简介：百度大厦位于北京市海淀区西二旗地铁站附近，为百度公司综合研发及办公总部。‘ + 39 ‘</div>‘; 40 41 //创建检索信息窗口对象 42 var searchInfoWindow = null; 43 searchInfoWindow = new BMapLib.SearchInfoWindow(map, content, { 44 title: "百度大厦", //标题 45 width: 290, //宽度 46 height: 105, //高度 47 panel: "panel", //检索结果面板 48 enableAutoPan: true, //自动平移 49 searchTypes: [ 50 BMAPLIB_TAB_SEARCH, //周边检索 51 BMAPLIB_TAB_TO_HERE, //到这里去 52 BMAPLIB_TAB_FROM_HERE //从这里出发 53 ] 54 }); 55 var marker = new BMap.Marker(poi); //创建marker对象 56 marker.enableDragging(); //marker可拖拽 57 marker.addEventListener("click", function (e) { 58 searchInfoWindow.open(marker); 59 }) 60 map.addOverlay(marker); //在地图中添加marker 61 searchInfoWindow.open(marker); //在marker上打开检索信息串口 62 $("close").onclick = function () { 63 searchInfoWindow.close(); 64 } 65 $("open").onclick = function () { 66 var enableSendToPhone = false; 67 if ($("enableSendToPhone").checked) { 68 enableSendToPhone = true; 69 } 70 searchInfoWindow = new BMapLib.SearchInfoWindow(map, content, { 71 title: "百度大厦", //标题 72 width: 290, //宽度 73 height: 105, //高度 74 panel: "panel", //检索结果面板 75 enableAutoPan: true, //自动平移 76 enableSendToPhone: enableSendToPhone, //是否启用发送到手机 77 searchTypes: [ 78 BMAPLIB_TAB_SEARCH, //周边检索 79 BMAPLIB_TAB_TO_HERE, //到这里去 80 BMAPLIB_TAB_FROM_HERE //从这里出发 81 ] 82 }); 83 if ($("enableAutoPan").checked) { 84 searchInfoWindow.enableAutoPan(); 85 } else { 86 searchInfoWindow.disableAutoPan(); 87 }; 88 searchInfoWindow.open(marker); 89 } 90 $("show").onclick = function () { 91 searchInfoWindow.show(); 92 } 93 $("hide").onclick = function () { 94 searchInfoWindow.hide(); 95 } 96 $("getPosition").onclick = function () { 97 var position = searchInfoWindow.getPosition(); 98 alert("经度：" + position.lng + "；纬度：" + position.lat); 99 } 100 $("setValue").onclick = function () { 101 searchInfoWindow.setPosition(new BMap.Point($("lng").value, $("lat").value)); 102 searchInfoWindow.setTitle($("title").value); 103 searchInfoWindow.setContent($("content").value); 104 } 105 $("getContent").onclick = function () { 106 alert(searchInfoWindow.getContent()); 107 } 108 $("getTitle").onclick = function () { 109 alert(searchInfoWindow.getTitle()); 110 } 111 function $(id) { 112 return document.getElementById(id); 113 } 114 115 //样式1 116 var searchInfoWindow1 = new BMapLib.SearchInfoWindow(map, "信息框1内容", { 117 title: "信息框1", //标题 118 panel: "panel", //检索结果面板 119 enableAutoPan: true, //自动平移 120 searchTypes: [ 121 BMAPLIB_TAB_FROM_HERE, //从这里出发 122 BMAPLIB_TAB_SEARCH //周边检索 123 ] 124 }); 125 function openInfoWindow1() { 126 searchInfoWindow1.open(new BMap.Point(116.319852, 40.057031)); 127 } 128 129 //样式2 130 var searchInfoWindow2 = new BMapLib.SearchInfoWindow(map, "信息框2内容", { 131 title: "信息框2", //标题 132 panel: "panel", //检索结果面板 133 enableAutoPan: true, //自动平移 134 searchTypes: [ 135 BMAPLIB_TAB_SEARCH //周边检索 136 ] 137 }); 138 function openInfoWindow2() { 139 searchInfoWindow2.open(new BMap.Point(116.324852, 40.057031)); 140 } 141 142 //样式3 143 var searchInfoWindow3 = new BMapLib.SearchInfoWindow(map, "信息框3内容", { 144 title: "信息框3", //标题 145 width: 290, //宽度 146 height: 40, //高度 147 panel: "panel", //检索结果面板 148 enableAutoPan: true, //自动平移 149 searchTypes: [ 150 ] 151 }); 152 function openInfoWindow3() { 153 searchInfoWindow3.open(new BMap.Point(116.328852, 40.057031)); 154 } 155 156 157 var isPanelShow = false; 158 //显示结果面板动作 159 $("showPanelBtn").onclick = function () { 160 if (isPanelShow == false) { 161 isPanelShow = true; 162 $("showPanelBtn").style.right = "300px"; 163 $("panelWrap").style.width = "300px"; 164 $("map").style.marginRight = "300px"; 165 $("showPanelBtn").innerHTML = "隐藏检索结果面板<br/>>"; 166 } else { 167 isPanelShow = false; 168 $("showPanelBtn").style.right = "0px"; 169 $("panelWrap").style.width = "0px"; 170 $("map").style.marginRight = "0px"; 171 $("showPanelBtn").innerHTML = "显示检索结果面板<br/><"; 172 } 173 } 174 </script> 175 </body> 176 </html>
详细实例请参考百度api