百度地图api(摘自百度)

百度地图api(摘自百度)
  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(摘自百度)

详细实例请参考百度api

百度地图api(摘自百度),布布扣,bubuko.com

百度地图api(摘自百度)

上一篇:win7 关机一直提示 准备配置windows 开机也提示的处理办法


下一篇:[已解决]:调用 LoadLibraryEx 失败,在 ISAPI 筛选器 "c:\Windows\Microsoft.NET\Framework\v4.0.30319\\aspnet_filter.