前言：这两天在做百度地图的功能，查看了百度官网的api完成了基本功能
api地址http://developer.baidu.com/map/jshome.htm 注意是javascript API 大众版2.0
废话不说先上图
一、导入百度地图api
<script type="text/javascript" src="/Scripts/jquery.min.js"></script>
<script src="http://api.map.baidu.com/api?v=2.0&ak=密钥" type="text/javascript"></script>
二、Html源码
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;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":"u6613u7c73wifi","contact_name":"u6613u7c73wifi","contact_phone":"123456","address":"u897fu5b89u5e02u9ad8u65b0u4e09u8def","type_name":"u7f8eu98df","sub_type_name":"u9655u83dc","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":"u5546u5bb62","contact_name":"u6613u7c73wifi","contact_phone":"u7684u65b9u6cd5u65b9u6cd5u6cd5","address":"u897fu5b89u5e02u9ad8u65b0u4e09u8def","type_name":"u8d2du7269","sub_type_name":"u7efcu5408u5546u573a","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;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,{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>