百度地圖api2.0體驗
前言：這兩天在作百度地圖的功能，查看了百度官網的api完成了基本功能javascript
api地址http://developer.baidu.com/map/jshome.htm 注意是javascript API 大衆版2.0php
廢話不說先上圖 css
1、導入百度地圖apihtml
<script type="text/javascript" src="/Scripts/jquery.min.js"></script>java
<script src="http://api.map.baidu.com/api?v=2.0&ak=密鑰" type="text/javascript"></script> jquery
2、Html源碼web
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="utf-8"> 5 <title>易米CMS - Bizmap</title> 6 <script src="/static/proxy/js/jquery-1.11.1.min.js"></script> 7 <script src="/static/admin/js/bootstrap.min.js"></script> 8 <script src="/static/proxy/js/general.js"></script> 9 <script src="/static/proxy/js/common.js"></script> 10 <link rel="stylesheet" type="text/css" href="/static/proxy/css/bootstrap.min.css"> 11 <link rel="stylesheet" type="text/css" href="/static/proxy/css/font.css"> 12 <link rel="stylesheet" type="text/css" href="/static/proxy/css/style.css"> 13 </head> 14 <body> 15 <!-- 頭部開始--> 16 <div class="navbar navbar-inverse navbar-fixed-top nva"> 17 <div class="nvamain"> 18 <div class="navbar navdaohang"> 19 <div class="logo"><a href="/index.php?r=proxy/default/index"><img src="/static/img/logo.png" width="215" height="55"></a></div> 20 <ul class="nva_cd"> 21 <li><a href="/index.php?r=proxy/default/index" class="cative">首頁</a></li> 22 <li><a href="/index.php?r=proxy/biz/index">商家管理</a></li> 23 <li><a href="/index.php?r=proxy/device/index">設備管理</a></li> 24 <!-- <li><a href="">人員管理</a></li>--> 25 <li><a href="/index.php?r=proxy/activity/index">商圈活動</a></li> 26 <li><a href="/index.php?r=proxy/ad/index">廣告管理</a></li> 27 <li><a href="#">帳戶管理</a></li> 28 29 <li><a href="/index.php?r=proxy/bizmap/index">商家分佈圖</a></li> 30 </ul> 31 32 <div class="admin_user"> 33 <ul> 34 <li class="yonghu"><a href="javascript:void(0)" title="proxy">proxy<span class="icon-iconfont-xiala"></span></a></li> 35 <li><a href="/index.php?r=proxy/proxy/settings"><span class="icon-iconfont-touxiang"></span> 個人資料</a></li> 36 <li><a href="/index.php?r=proxy/device/index"><span class="icon-iconfont-luyouqi"></span> 個人設備</a></li> 37 <li><a href="/index.php?r=proxy/bd/index"><span class="icon-iconfont-jifen"></span> 人員管理</a></li> 38 <li><a href="/index.php?r=proxy/recharge/index"><span class="icon-iconfont-chongzhi"></span> 充值中心</a></li> 39 <li><a href="/index.php?r=proxy/proxy/repassword"><span class="icon-iconfont-mimazhuanhuan"></span> 修改密碼</a></li> 40 <li><a href="/index.php?r=proxy/default/logout"><span class="icon-iconfont-tuichudenglu"></span> 安全退出</a></li> 41 </ul> 42 </div> 43 </div> 44 </div> 45 46 </div> 47 <!-- 頭部結束--> 48 49 50 <style type="text/css"> 51 #allmap {width: 960px;height: 400px;overflow: hidden;margin:0;border:1px solid #bcbcbc;} 52 #allmap img {max-width: none;}， 53 </style> 54 55 56 <!-- 中間開始--> 57 <div class="container"> 58 <div style="margin-top:10px;"></div> 59 <div class="row"> 60 61 <div id="allmap"> 62 正在加載地圖... 63 </div> 64 65 </div> 66 <div class="row"> 67 <div id="mapInfo" style="margin-top:12px;"></div> 68 69 </div> 70 <div class="row"> 71 <div style="margin-top:5px;"> 72 商家名稱 73 <input type="text" id="sname" name="sname" value="" maxlength="15" autocomplete="off" style="margin-top:0px;width:180px;" class="text small" /> 74 <input type="button" id="btnSearch" class="btn" value="查 詢" /> 75 <input type="button" onclick="ExportMapExcel()" class="btn" value="導 出" /> 76 <!--</form>--> 77 <div id="loadMapInfo" style="margin-top:12px;"></div> 78 </div> 79 80 <div class="biaoge"> 81 82 <table id="stable" class="table" > 83 <thead> 84 <tr class="biaoti border_d6e1ee"> 85 <th> 86 <input type="checkbox" onclick="checkBizAll(this.checked);" /> 87 </th> 88 <th> 89 商家名稱 90 </th> 91 <th> 92 商家地址 93 </th> 94 <th> 95 查看位置 96 </th> 97 </tr> 98 </thead> 99 <tbody id="tbodyMList"> 100 101 </tbody> 102 103 </table> 104 </div> 105 106 </div> 107 108 <form action="/index.php?r=proxy/bizmap/exportmapexcel" style="display:none" id="exportForm" method="post" target="_blank"> 109 <input type="hidden" id="ids" name="ids" /> 110 </form> 111 112 </div> 113 <!-- 中間結束--> 114 115 116 <script src="http://api.map.baidu.com/api?v=2.0&ak=Q0O9mkEqXfiLRRfVLUl7sHDZ" type="text/javascript"></script> 117 <script src="http://api.map.baidu.com/library/GeoUtils/1.2/src/GeoUtils_min.js" type="text/javascript"></script> 118 <script src="http://api.map.baidu.com/library/EventWrapper/1.2/src/EventWrapper.min.js" type="text/javascript"></script> 119 120 121 122 <script type="text/javascript"> 123 //擴展方法 124 // String.prototype.StartWith=function(s){ 125 // if(s==null||s==""||this.length==0||s.length>this.length) 126 // return false; 127 // if(this.substr(0,s.length)==s) 128 // return true; 129 // else 130 // return false; 131 // return true; 132 // } 133 134 135 136 137 138 139 //************************ 140 //基本數據遍歷 141 //************************ 142 var bizArray = new Array(); //存放商家數組 143 var bizJson = null; //存放商家的json 144 var bizCount = 2;//商家總數 145 var deviceCount = 2;//設備總數 146 147 var pageSize = 10;//每次加載商家個數 148 var showCount = 0;//當前列表顯示的商家個數 149 var loadCount = 2; //當前範圍總共有多少個商家 150 var map;//百度地圖 151 152 //百度地圖初始化 153 map = new BMap.Map("allmap"); 154 map.addControl(new BMap.NavigationControl()); //地圖平移縮放控件 155 map.addControl(new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT})); //比例尺控件 156 map.addControl(new BMap.OverviewMapControl({isOpen:true})); //縮略地圖控件，默認位於地圖右下方，是一個可摺疊的縮略地圖 157 //map.addControl(new BMap.MapTypeControl({mapTypes: [BMAP_NORMAL_MAP,BMAP_HYBRID_MAP]})); //2D圖，衛星圖 //左上角， 地圖類型控件 158 map.enableScrollWheelZoom(true);//是否可縮放 159 map.addEventListener("tilesloaded",function(){ 160 $(".BMap_cpyCtrl").hide(); 161 $(".anchorBL").hide(); 162 });//地圖加載完畢後 隱藏百度圖標 163 map.centerAndZoom(new BMap.Point(108.95401,34.265193), 5);//設置地圖中心和級別 new BMap.Point(116.404, 39.915) 164 165 bizJson = {"2":{"biz_id":"2","biz_name":"\u6613\u7c73wifi","contact_name":"\u6613\u7c73wifi","contact_phone":"123456","address":"\u897f\u5b89\u5e02\u9ad8\u65b0\u4e09\u8def","type_name":"\u7f8e\u98df","sub_type_name":"\u9655\u83dc","lon":"108.95401","lat":" 34.265193","is_online":0,"devices":[{"device_id":"6","device_name":"ddd","reg_number":"111111","auth_mode":"1","is_online":0},{"device_id":"18","device_name":"dfdf","reg_number":"d","auth_mode":"1","is_online":0}]},"5":{"biz_id":"5","biz_name":"\u5546\u5bb62","contact_name":"\u6613\u7c73wifi","contact_phone":"\u7684\u65b9\u6cd5\u65b9\u6cd5\u6cd5","address":"\u897f\u5b89\u5e02\u9ad8\u65b0\u4e09\u8def","type_name":"\u8d2d\u7269","sub_type_name":"\u7efc\u5408\u5546\u573a","lon":"108.954432","lat":" 34.265715","is_online":0,"devices":[]}}; 166 167 //************** 168 //建立商家信息框 169 //************** 170 function createInfoTip(biz_id) 171 { 172 var biz_Name = bizJson[biz_id]['biz_name']; //商家名稱 173 //var is_Online = parseInt(bizJson[biz_id]['is_online']), //商家是否在線 174 var d_count = bizJson[biz_id]['devices'].length;//商家設備個數 175 var address = bizJson[biz_id]['address']; //地址 176 var contactName = bizJson[biz_id]['contact_name']; 177 var phone = bizJson[biz_id]['contact_phone']; 178 var type_name = bizJson[biz_id]['type_name']; 179 var sub_type_name = bizJson[biz_id]['sub_type_name']; 180 181 var d_html = ""; //設備信息 182 for(i = 0; i < d_count; i++) { 183 d_html += "設備"+(i+1) +": " + bizJson[biz_id]['devices'][i]['reg_number'] + "("+(0 == parseInt(bizJson[biz_id]['devices'][i]['is_online']) ? "<span style='color:red;'>離線</span>":"<span style='color:green;'>在線</span>") + ")"; // + bizJson[biz_id]['devices'][i]['auth_mode']; 184 //if(i!= 0 && i%2 == 0) 185 // { 186 d_html += "<br/>"; 187 // } 188 } 189 190 191 var sContent ="<h3 style='margin:0 0 5px 0;padding:0.2em 0;line-height:15px;'>"+ biz_Name +"</h3>" + 192 //"<div style='min-height:120px;'><img style='float:left;margin:4px' id='imgDemo' src='"+ imgsrc +"' width='100' height='100' title='"+mName+"'/>" + 193 "<p style='margin:0;line-height:1.5;font-size:13px;'>行 業：" +type_name+" - " + sub_type_name+"</p>" + 194 //"<p style='height:5px;'></p>" + 195 "<p style='margin:0;line-height:1.5;font-size:13px;'>聯 系 人："+ contactName +"</p>" + 196 //"<p style='height:5px;'></p>" + 197 "<p style='margin:0;line-height:1.5;font-size:13px;'>電 話："+phone+"</p>" + 198 //"<p style='height:5px;'></p>" + 199 "<p style='margin:0;line-height:1.5;font-size:13px;height:30px;'><span style='float:left;width:58px;height:30px;'>地 址：</span><span >"+address+"</span></p>" + 200 //"<p style='height:5px;'></p>" + 201 //"<p style='margin:0;line-height:1.5;font-size:13px;'>簡介："+feature+"</p>" + 202 "<p style='height:5px;'></p>" + 203 204 "<p style='margin:0;line-height:1.5;font-size:13px;'>設備總數："+ d_count +"</p>" + 205 "<div style='margin:0;line-height:1.5;font-size:13px;'>"+d_html+"</div>" + 206 "<p style='height:3px;'></p>" + 207 "</div>"; 208 return sContent; 209 } 210 211 //***************** 212 //建立Marker標註 213 //***************** 214 function addMarker(biz_id) { 215 var biz_Name = bizJson[biz_id]['biz_name']; //商家名稱 216 var is_Online = parseInt(bizJson[biz_id]['is_online']); //商家是否在線 217 //var d_count = bizJson[biz_id]['devices'].length;//商家設備個數 218 var biz_point = new BMap.Point(bizJson[biz_id]['lon'], bizJson[biz_id]['lat']);//商家座標 219 220 if(0 == is_Online) //離線用灰色圖標 221 { 222 var myIcon = new BMap.Icon("/static/proxy/img/bdmap/marker_gray_default.png", new BMap.Size(10,18) ,{anchor: new BMap.Size(9,25),infoWindowAnchor: new BMap.Size(10, 0)}); // {offset: new BMap.Size(50, -50) ,{anchor: new BMap.Size(10,25)} 223 var marker = new BMap.Marker(biz_point,{icon:myIcon}); 224 } 225 else 226 {//在線用默認圖標 227 //var myIcon = new BMap.Icon("http://api0.map.bdimg.com/images/marker_red_sprite.png", new BMap.Size(39,25) ,{anchor: new BMap.Size(10,0)} ); //{offset: new BMap.Size(50, -50) 228 //var marker = new BMap.Marker(point); 229 var myIcon = new BMap.Icon("/static/proxy/img/bdmap/marker_red_default.gif", new BMap.Size(10,18) ,{anchor: new BMap.Size(9,25),infoWindowAnchor: new BMap.Size(10, 0)}); // {offset: new BMap.Size(50, -50) ,{anchor: new BMap.Size(10,25)} 230 var marker = new BMap.Marker(biz_point,{icon:myIcon}); 231 } 232 // 建立信息窗口對象 233 var tip = createInfoTip(biz_id); 234 //'http://api.map.baidu.com/images/iw3.png' 235 var infoWindow = new BMap.InfoWindow(tip,{width:300,background:null}); 236 //添加Marker 237 238 marker.addEventListener("click", function(){ 239 this.openInfoWindow(infoWindow); 240 }); 241 //marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳動的動畫 242 marker.setTitle(biz_Name); 243 //setMarker(biz_id,tip,marker); 244 map.addOverlay(marker); 245 bizJson[biz_id]['marker'] = marker; 246 bizArray.push(biz_id); 247 //bizJson[biz_id]['infoWindowHtml'] = tip; 248 } 249 250 //加載地圖數據 251 function initMapData() 252 { 253 //設置商家數據 254 $("#mapInfo").text("商家總數：" + bizCount +" 設備總數：" +deviceCount); 255 $("#loadMapInfo").html("當前範圍商家："+ loadCount); 256 257 //循環添加Marker 258 for(var b in bizJson){ 259 addMarker(b); 260 } 261 //加載列表 262 loadBizList(true); 263 } 264 265 //查看商家 266 function findBiz(b) 267 { 268 var ckmarker = bizJson[b]['marker'];//bizJson[2]['infoWindowHtml' 269 ckmarker.dispatchEvent("click"); 270 //BMapLib.EventWrapper.trigger(ckmarker, 'click', {'type': 'onclick', target: ckmarker}); 271 } 272 273 //全選功能 274 function checkBizAll(isCheck) 275 { 276 $("#tbodyMList :visible").find(":checkbox").prop("checked",isCheck); 277 } 278 279 //導出功能 280 function ExportMapExcel() 281 { 282 var bids = getCheck({obj:"#tbodyMList"}); 283 if(bids != "") 284 { 285 $("#ids").val(bids); 286 $("#exportForm").submit(); 287 //window.open('exportmapexcel?ids='+bids); 288 } 289 else 290 { 291 showAlert({msg:'請選擇須要導出的商家'}); 292 293 //alert("請選擇須要導出的商家"); 294 } 295 296 } 297 298 299 //*********************** 300 //加載可視範圍內的商家列表 flag是不是初次加載 301 //*********************** 302 function loadBizList(flag,sname) 303 { 304 //按距離排序 305 //按距離從小到大排序 306 bizArray.sort(function(a,b){ 307 return BMapLib.GeoUtils.getDistance(map.getCenter(),new BMap.Point(bizJson[a]['lon'],bizJson[a]['lat'])) - BMapLib.GeoUtils.getDistance(map.getCenter(),new BMap.Point(bizJson[b]['lon'],bizJson[b]['lat'])); 308 }); 309 310 showCount = 0; 311 loadCount = 0; 312 var alltr = ""; 313 var slon = 0; 314 var slat = 0; 315 if(null != sname && "" != sname) 316 { 317 for (i = 0; i < bizCount; i++) { 318 if(bizJson[bizArray[i]]['biz_name'] == sname) 319 { 320 slon = bizJson[bizArray[i]]['lon']; 321 slat = bizJson[bizArray[i]]['lat']; 322 break; 323 } 324 } 325 326 // for(var b in bizJson){ 327 // if(bizJson[b]['biz_name'].StartWith(sname)) 328 // { 329 // slon = bizJson[b]['lon']; 330 // slat = bizJson[b]['lat']; 331 // break; 332 // } 333 // } 334 } 335 else 336 { 337 if(flag) 338 { 339 // for(var b in bizJson){ 340 // alltr += createTr(b,loadCount); 341 // loadCount +=1; 342 // } 343 for (i = 0; i < bizCount; i++) { 344 alltr += createTr(bizArray[i],loadCount); 345 loadCount +=1; 346 } 347 348 } 349 else 350 { 351 352 for (i = 0; i < bizCount; i++) { 353 var result = BMapLib.GeoUtils.isPointInRect(new BMap.Point(bizJson[bizArray[i]]['lon'], bizJson[bizArray[i]]['lat']), map.getBounds()); 354 if(result) 355 { 356 alltr += createTr(bizArray[i],loadCount); 357 loadCount +=1; 358 } 359 } 360 361 // for(var b in bizJson){ 362 // var result = BMapLib.GeoUtils.isPointInRect(new BMap.Point(bizJson[b]['lon'], bizJson[b]['lat']), map.getBounds()); 363 // if(result) 364 // { 365 // alltr += createTr(b,loadCount); 366 // loadCount +=1; 367 // } 368 // } 369 370 } 371 } 372 if(loadCount != 0) 373 { 374 alltr += '<tr class="trbor"><td colspan="4" style="text-align:center;">'+ (showCount == loadCount ? '所有加載完畢' : '<a href="javascript:void(0);" id="btnMore" onclick="clickLoadMore(this)">點擊加載更多</a>' )+'</td></tr>'; 375 } 376 $("#tbodyMList").html("").append(alltr); 377 $("#loadMapInfo").html("當前範圍商家："+ loadCount); 378 if(slon != 0 && slat != 0) 379 { 380 //地圖中心 381 map.centerAndZoom(new BMap.Point(slon, slat),12);//級別 382 } 383 } 384 385 386 //建立tr 387 function createTr(b ,trIndex) 388 { 389 var trStyle = ''; 390 if((trIndex + 1) > pageSize) 391 { 392 trStyle = 'style="display:none;"'; 393 //mobj.marker.setAnimation(null); 394 if(1 == parseInt(bizJson[b]['is_online'])) 395 { 396 bizJson[b]['marker'].setIcon(new BMap.Icon("/static/proxy/img/bdmap/marker_red_default.gif",new BMap.Size(10,14),{anchor: new BMap.Size(9,25),infoWindowAnchor: new BMap.Size(10, 0)})); 397 } 398 else 399 { 400 bizJson[b]['marker'].setIcon(new BMap.Icon("/static/proxy/img/bdmap/marker_gray_default.png",new BMap.Size(10,14),{anchor: new BMap.Size(9,25),infoWindowAnchor: new BMap.Size(10, 0)})); 401 } 402 } 403 else{ 404 showCount +=1; 405 if(1 == parseInt(bizJson[b]['is_online'])) 406 { 407 bizJson[b]['marker'].setIcon(new BMap.Icon("http://api0.map.bdimg.com/images/marker_red_sprite.png",new BMap.Size(20,32),{anchor: new BMap.Size(9,25),infoWindowAnchor: new BMap.Size(10, 0)})); 408 } 409 else 410 { 411 bizJson[b]['marker'].setIcon(new BMap.Icon("/static/proxy/img/bdmap/marker_gray_sprite.png",new BMap.Size(20,32),{anchor: new BMap.Size(9,25),infoWindowAnchor: new BMap.Size(10, 0)})); 412 } 413 //mobj.marker.setAnimation(BMAP_ANIMATION_BOUNCE); 414 } 415 if(b != null && b != 0) 416 { 417 var trHtml = '<tr class="trbor" '+ trStyle +' id="mtr'+trIndex+'"><td ><input type="checkbox" value="'+b+'" smid = "' + b + '" /></td>'; 418 trHtml+= '<td >'+ bizJson[b]['biz_name'] +'</td>'; 419 trHtml+= '<td >'+ bizJson[b]['address'] +'</td>'; 420 trHtml+= '<td style="cursor:pointer;" onclick="findBiz('+ b +')" name="mclick">'; 421 trHtml+= '<div name="mid" style="display:none">'+ b +'</div>'; 422 trHtml+= '查看位置</td>'; 423 trHtml+= '</tr>'; 424 return trHtml; 425 } 426 return ""; 427 } 428 429 430 //點擊顯示更多 431 function clickLoadMore(obj) 432 { 433 if(loadCount > showCount) 434 { 435 var lcount = (showCount + pageSize) > loadCount ? loadCount : (showCount + pageSize); 436 for (var i = showCount; i < lcount; i++) { 437 $("#mtr"+i).show(); 438 var id = $("#mtr"+i).find("div[name='mid']").text(); 439 showCount += 1; 440 if(1 == parseInt(bizJson[id]['is_online'])) 441 { 442 bizJson[id]['marker'].setIcon(new BMap.Icon("http://api0.map.bdimg.com/images/marker_red_sprite.png",new BMap.Size(20,32),{anchor: new BMap.Size(9,25),infoWindowAnchor: new BMap.Size(10, 0)})); 443 } 444 else 445 { 446 bizJson[id]['marker'].setIcon(new BMap.Icon("/Content/img/bdmap/marker_gray_sprite.png",new BMap.Size(20,32),{anchor: new BMap.Size(9,25),infoWindowAnchor: new BMap.Size(10, 0)})); 447 } 448 } 449 if(loadCount == showCount) 450 { 451 $(obj).html("所有加載完畢"); 452 } 453 } 454 } 455 456 457 458 //瀑布流 459 var totalheight = 0; 460 function loadData() { 461 totalheight = parseFloat($(window).height()) + parseFloat($(window).scrollTop()); 462 if ($(document).height() <= totalheight) { 463 //加載數據 464 clickLoadMore($("#btnMore")); 465 } 466 } 467 468 //ready 469 $(function(){ 470 if(bizJson != null) //若是查詢到得商家不爲空 471 { 472 initMapData(); 473 474 $("#btnSearch").click(function () { 475 loadBizList(true,$("#sname").val()); 476 }); 477 478 $(window).scroll(function () { 479 //console.log("滾動條到頂部的垂直高度: " + $(document).scrollTop()); 480 //console.log("頁面的文檔高度 ：" + $(document).height()); 481 //console.log('瀏覽器的高度：' + $(window).height()); 482 loadData(); 483 }); 484 485 486 map.addEventListener("moveend",function(){ loadBizList(false);});//地圖移動結束事件 487 map.addEventListener("zoomend",function(){ loadBizList(false);});//縮放結束事件 488 map.addEventListener("dragend",function(){ loadBizList(false);});//拖拽結束事件 489 map.addEventListener("resize",function(){ loadBizList(false);});//可視區域發生變化事件 490 } 491 }); 492 493 </script> 494 <!-- 版權開始--> 495 <div class="modal-footer">© Copyright 2014 Powered by e</div> 496 <!-- 版權結束--> 497 </body> 498 </html>
相關文章
- 1. 百度地圖api2.0體驗
- 2. 百度三維地圖體驗(坑爹啊有圖有真相)
- 3. 百度eCharts體驗
- 4. 百度地圖
- 5. Android 地圖 —— 百度地圖
- 6. 百度地圖離線API2.0(含示例,可徹底斷網訪問)
- 7. Unity3D——百度地圖SDK接入(經驗)
- 8. Android開發百度地圖（一）之初體驗
- 9. Android百度地圖開發（一）之初體驗
- 10. android 百度地圖（具體請看百度開放平臺）
- 更多相關文章...
- • PHP 獲取圖像寬度與高度 - PHP參考手冊
- • 物理地址（MAC地址）是什麼？ - TCP/IP教程
- • 算法總結-廣度優先算法
- • 算法總結-深度優先算法
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章