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" 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
新闻热点
疑难解答
