2016-03-17:
百度地圖API申請key的步驟相對簡單，不做過多闡述。
初次使用百度地圖API感覺有點神奇，有些功能加進來以后有點問題，注釋掉等有空再解決。
代碼如下：
1 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> 2 <!DOCTYPE html> 3 <html> 4 <head> 5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 6 <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 7 8 <style type="text/css"> 9 body,html { 10 width: 100%; 11 height: 100%; 12 margin: 0; 13 font-family: "微軟雅黑"; 14 } 15 16 #allmap { 17 width: 100%; 18 height: 100%; 19 } 20 21 p { 22 margin-left: 5px; 23 font-size: 14px; 24 } 25 26 #result { 27 width: 100%; 28 font-size: 12px; 29 } 30 31 dl,dt,dd,ul,li { 32 margin: 0; 33 padding: 0; 34 list-style: none; 35 } 36 37 dt { 38 font-size: 14px; 39 font-family: "微軟雅黑"; 40 font-weight: bold; 41 border-bottom: 1px dotted #000; 42 padding: 5px 0 5px 5px; 43 margin: 5px 0; 44 } 45 46 dd { 47 padding: 5px 0 0 5px; 48 } 49 50 li { 51 line-height: 28px; 52 } 53 54 #l-map { 55 height: 300px; 56 width: 100%; 57 } 58 59 #r-result { 60 width: 100%; 61 } 62 </style> 63 64 <script type="text/javascript" 65 src="http://api.map.baidu.com/api?v=2.0&ak=你的API密匙"></script> //密匙申請步驟比較容易，所以不做過多解釋~加密后：aUQyZ3d0R2ZvMXA5OGxQZW5pZFV5eDho 66 <script type="text/javascript" 67 src="http://api.map.baidu.com/library/TrafficControl/1.4/src/TrafficControl_min.js"></script> 68 <link href="http://api.map.baidu.com/library/TrafficControl/1.4/src/TrafficControl_min.css" rel="stylesheet" type="text/css" /> 69 <script type="text/javascript" 70 src="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.js"></script> 71 <link rel="stylesheet" href="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.css" /> 72 73 <title>寶寶的地圖</title> 74 </head> 75 <body> 76 <div id="allmap"></div> 77 <div id="l-map"></div> 78 <div id="r-result">請輸入:<input type="text" id="suggestId" size="20" value="百度" style="width:150px;" /></div> 79 <div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div> 80 </body> 81 </html> 82 83 <!-- 異步加載 --> 84 <script type="text/javascript"> 85 //百度地圖API功能 86 function loadJScript() { 87 var script = document.createElement("script"); 88 script.type = "text/javascript"; 89 script.src = "http://api.map.baidu.com/api?v=2.0&ak=iD2gwtGfo1p98lPenidUyx8h&callback=init"; 90 document.body.appendChild(script); 91 } 92 window.onload = loadJScript; //異步加載地圖 93 alert("異步成功開啟"); 94 </script> 95 96 <!-- 導航控件--> 97 <script type="text/javascript"> 98 // 百度地圖API功能 99 var map = new BMap.Map("allmap"); 100 map.centerAndZoom(new BMap.Point(113.275, 23.117), 11); 101 map.enableScrollWheelZoom(); //啟用滾輪放大縮小，默認禁用 102 map.enableContinuousZoom(); //啟用地圖慣性拖拽，默認禁用 103 104 // 添加帶有定位的導航控件 105 var navigationControl = new BMap.NavigationControl({ 106 // 靠左上角位置 107 anchor : BMAP_ANCHOR_TOP_LEFT, 108 // LARGE類型 109 type : BMAP_NAVIGATION_CONTROL_LARGE, 110 // 啟用顯示定位 111 enableGeolocation : true 112 }); 113 map.addControl(navigationControl); 114 // 添加定位控件 115 var geolocationControl = new BMap.GeolocationControl(); 116 geolocationControl.addEventListener("locationSuccess", function(e) { 117 // 定位成功事件 118 var address = ''; 119 address += e.addressComponent.province; 120 address += e.addressComponent.city; 121 address += e.addressComponent.district; 122 address += e.addressComponent.street; 123 address += e.addressComponent.streetNumber; 124 //alert("當前定位地址為：" + address); 125 }); 126 geolocationControl.addEventListener("locationError", function(e) { 127 // 定位失敗事件 128 alert(e.message); 129 }); 130 map.addControl(geolocationControl); 131 132 alert("導航控件開啟"); 133 </script> 134 135 <!-- 城市選擇欄--> 136 <script type="text/javascript"> 137 map.enableInertialDragging(); 138 var size = new BMap.Size(10, 20); 139 map.addControl(new BMap.CityListControl({ 140 anchor : BMAP_ANCHOR_TOP_RIGHT, 141 offset : size, 142 143 })); 144 145 var city = document.getElementById("cityName").value; 146 if(city != ""){ 147 map.centerAndZoom(city,11); // 用城市名設置地圖中心點 148 } 149 alert("城市選擇欄控件開啟"); 150 </script> 151 152 <!-- 路況面板--> 153 <script type="text/javascript"> 154 // 百度地圖API功能 155 var ctrl = new BMapLib.TrafficControl({ 156 showPanel: false //是否顯示路況提示面板 157 }); 158 map.addControl(ctrl); 159 ctrl.setAnchor(BMAP_ANCHOR_BOTTOM_RIGHT); 160 alert("路況控件開啟"); 161 </script> 162 163 <!-- 點擊獲取坐標 --> 164 <script type="text/javascript"> 165 /*map.addEventListener("click",function(e){ 166 alert(e.point.lng + "," + e.point.lat); 167 });*/ 168 </script> 169 170 <!-- 檢索控件--> 171 <script type="text/javascript"> 172 173 //檢索地圖 174 map.centerAndZoom(poi, 16); 175 map.enableScrollWheelZoom(); 176 var content = " "+" "+" "+" "; 177 //創建檢索信息窗口對象 178 var searchInfoWindow = null; 179 var marker; 180 marker.enableDragging(); //marker可拖拽 181 map.addOverlay(marker); //在地圖中添加marker 182 //marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳動的動畫 183 alert("檢索控件開啟"); 184 185 </script> 186 187 <!-- 右鍵菜單控件--> 188 <script type="text/javascript"> 189 /* 190 var map = new BMap.Map("allmap"); 191 var point = new BMap.Point(113.275, 23.117); 192 map.centerAndZoom(point,15); 193 var menu = new BMap.ContextMenu(); 194 var txtMenuItem = [ 195 { 196 text:'放大', 197 callback:function(){map.zoomIn();} 198 }, 199 { 200 text:'縮小', 201 callback:function(){map.zoomOut();} 202 } 203 ]; 204 for(var i=0; i < txtMenuItem.length; i++){ 205 menu.addItem(new BMap.MenuItem(txtMenuItem[i].text,txtMenuItem[i].callback,100)); 206 } 207 map.addContextMenu(menu); 208 */ 209 </script> 210 211 <!-- 右鍵菜單刪除標注控件--> 212 <script type="text/javascript"> 213 /* 214 var removeMarker = function(e,ee,marker) 215 { 216 map.removeOverlay(marker); 217 } 218 219 //創建右鍵菜單 220 var markerMenu=new BMap.ContextMenu(); 221 markerMenu.addItem(new BMap.MenuItem('刪除',removeMarker.bind(marker))); 222 var marker = new BMap.Marker(poi); 223 map.addOverlay(marker); 224 marker.addContextMenu(markerMenu); 225 */ 226 </script> 227 228 <!-- 智能搜索控件--> 229 <script type="text/javascript"> 230 /*// 百度地圖API功能 231 function G(id) { 232 return document.getElementById(id); 233 } 234 235 //var map = new BMap.Map("allmap"); 236 //map.centerAndZoom(new BMap.Point(113.275, 23.117),11); // 初始化地圖,設置城市和地圖級別。 237 238 var ac = new BMap.Autocomplete( //建立一個自動完成的對象 239 {"input" : "suggestId" 240 ,"location" : map 241 }); 242 243 ac.addEventListener("onhighlight", function(e) { //鼠標放在下拉列表上的事件 244 var str = ""; 245 var _value = e.fromitem.value; 246 var value = ""; 247 if (e.fromitem.index > -1) { 248 value = _value.province + _value.city + _value.district + _value.street + _value.business; 249 } 250 str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value; 251 252 value = ""; 253 if (e.toitem.index > -1) { 254 _value = e.toitem.value; 255 value = _value.province + _value.city + _value.district + _value.street + _value.business; 256 } 257 str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value; 258 G("searchResultPanel").innerHTML = str; 259 }); 260 261 var myValue; 262 ac.addEventListener("onconfirm", function(e) { //鼠標點擊下拉列表后的事件 263 var _value = e.item.value; 264 myValue = _value.province + _value.city + _value.district + _value.street + _value.business; 265 G("searchResultPanel").innerHTML ="onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue; 266 267 setPlace(); 268 }); 269 270 function setPlace(){ 271 map.clearOverlays(); //清除地圖上所有覆蓋物 272 function myFun(){ 273 var pp = local.getResults().getPoi(0).point; //獲取第一個智能搜索的結果 274 map.centerAndZoom(pp, 18); 275 map.addOverlay(new BMap.Marker(pp)); //添加標注 276 } 277 var local = new BMap.LocalSearch(map, { //智能搜索 278 onSearchComplete: myFun 279 }); 280 local.search(myValue); 281 }*/ 282 </script>
