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" /> 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" alt="" 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 //樣式1116 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 //樣式2130 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 //樣式3143 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
新聞熱點
疑難解答
