百度地圖api（摘自百度）

時間 2019-11-11

標籤百度地圖 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" 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         //樣式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>

詳細實例請參考百度apijavascript

1. 百度地圖API
2. 百度地圖api
3. 百度地圖 api
4. ----百度地圖api----
5. 百度地圖API自定義地圖
6. LPCTSTR —— 摘自百度百科
7. 【React】百度地圖API
8. 百度地圖API用法
9. vue + 百度地圖api
10. 百度地圖API（一）
更多相關文章...
• PHP 獲取圖像寬度與高度 - PHP參考手冊
• PHP imagecolorallocatealpha - 爲一幅圖像分配顏色和透明度 - PHP參考手冊
• 算法總結-廣度優先算法
• 算法總結-深度優先算法

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。