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>
2530
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
