百度地图api2.0体验

前言:这两天在做百度地图的功能,查看了百度官网的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>&nbsp;&nbsp;我的资料</a></li>

 36                             <li><a href="/index.php?r=proxy/device/index"><span class="icon-iconfont-luyouqi"></span>&nbsp;&nbsp;我的设备</a></li>

 37                             <li><a href="/index.php?r=proxy/bd/index"><span class="icon-iconfont-jifen"></span>&nbsp;&nbsp;人员管理</a></li>

 38                             <li><a href="/index.php?r=proxy/recharge/index"><span class="icon-iconfont-chongzhi"></span>&nbsp;&nbsp;充值中心</a></li>

 39                             <li><a href="/index.php?r=proxy/proxy/repassword"><span class="icon-iconfont-mimazhuanhuan"></span>&nbsp;&nbsp;修改密码</a></li>

 40                             <li><a href="/index.php?r=proxy/default/logout"><span class="icon-iconfont-tuichudenglu"></span>&nbsp;&nbsp;安全退出</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;'>行&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;业:" +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;'>电&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;话:"+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;'>地&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;址:</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>

 

 

你可能感兴趣的:(百度地图)