前言：这两天在做百度地图的功能，查看了百度官网的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源码
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>易米CMS - Bizmap</title>
<script src="/static/proxy/js/jquery-1.11.1.min.js"></script>
<script src="/static/admin/js/bootstrap.min.js"></script>
<script src="/static/proxy/js/general.js"></script>
<script src="/static/proxy/js/common.js"></script>
<link rel="stylesheet" type="text/css" href="/static/proxy/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="/static/proxy/css/font.css">
<link rel="stylesheet" type="text/css" href="/static/proxy/css/style.css">
</head>
<body>
<!-- 头部开始-->
<div class="navbar navbar-inverse navbar-fixed-top nva">
<div class="nvamain">
<div class="navbar navdaohang">
<div class="logo"><a href="/index.php?r=proxy/default/index"><img src="/static/img/logo.png" width="215" height="55"></a></div>
<ul class="nva_cd">
<li><a href="/index.php?r=proxy/default/index" class="cative">首页</a></li>
<li><a href="/index.php?r=proxy/biz/index">商家管理</a></li>
<li><a href="/index.php?r=proxy/device/index">设备管理</a></li>
<!-- <li><a href="">人员管理</a></li>-->
<li><a href="/index.php?r=proxy/activity/index">商圈活动</a></li>
<li><a href="/index.php?r=proxy/ad/index">广告管理</a></li>
<li><a href="#">账户管理</a></li>
<li><a href="/index.php?r=proxy/bizmap/index">商家分布图</a></li>
</ul>
<div class="admin_user">
<ul>
<li class="yonghu"><a href="javascript:void(0)" title="proxy">proxy<span class="icon-iconfont-xiala"></span></a></li>
<li><a href="/index.php?r=proxy/proxy/settings"><span class="icon-iconfont-touxiang"></span> 我的资料</a></li>
<li><a href="/index.php?r=proxy/device/index"><span class="icon-iconfont-luyouqi"></span> 我的设备</a></li>
<li><a href="/index.php?r=proxy/bd/index"><span class="icon-iconfont-jifen"></span> 人员管理</a></li>
<li><a href="/index.php?r=proxy/recharge/index"><span class="icon-iconfont-chongzhi"></span> 充值中心</a></li>
<li><a href="/index.php?r=proxy/proxy/repassword"><span class="icon-iconfont-mimazhuanhuan"></span> 修改密码</a></li>
<li><a href="/index.php?r=proxy/default/logout"><span class="icon-iconfont-tuichudenglu"></span> 安全退出</a></li>
</ul>
</div>
</div>
</div>
</div>
<!-- 头部结束-->
<style type="text/css">
#allmap { 960px;height: 400px;overflow: hidden;margin:0;border:1px solid #bcbcbc;}
#allmap img {max- none;}，
</style>
<!-- 中间开始-->
<div class="container">
<div style="margin-top:10px;"></div>
<div class="row">
<div id="allmap">
正在加载地图...
</div>
</div>
<div class="row">
<div id="mapInfo" style="margin-top:12px;"></div>
</div>
<div class="row">
<div style="margin-top:5px;">
商家名称
<input type="text" id="sname" name="sname" value="" maxlength="15" autocomplete="off" style="margin-top:0px;180px;" class="text small" />
<input type="button" id="btnSearch" class="btn" value="查 询" />
<input type="button" onclick="ExportMapExcel()" class="btn" value="导 出" />
<!--</form>-->
<div id="loadMapInfo" style="margin-top:12px;"></div>
</div>
<div class="biaoge">
<table id="stable" class="table" >
<thead>
<tr class="biaoti border_d6e1ee">
<th>
<input type="checkbox" onclick="checkBizAll(this.checked);" />
</th>
<th>
商家名称
</th>
<th>
商家地址
</th>
<th>
查看位置
</th>
</tr>
</thead>
<tbody id="tbodyMList">
</tbody>
</table>
</div>
</div>
<form action="/index.php?r=proxy/bizmap/exportmapexcel" style="display:none" id="exportForm" method="post" target="_blank">
<input type="hidden" id="ids" name="ids" />
</form>
</div>
<!-- 中间结束-->
<script src="http://api.map.baidu.com/api?v=2.0&ak=Q0O9mkEqXfiLRRfVLUl7sHDZ" type="text/javascript"></script>
<script src="http://api.map.baidu.com/library/GeoUtils/1.2/src/GeoUtils_min.js" type="text/javascript"></script>
<script src="http://api.map.baidu.com/library/EventWrapper/1.2/src/EventWrapper.min.js" type="text/javascript"></script>
<script type="text/javascript">
//扩展方法
// String.prototype.StartWith=function(s){
// if(s==null||s==""||this.length==0||s.length>this.length)
// return false;
// if(this.substr(0,s.length)==s)
// return true;
// else
// return false;
// return true;
// }
//************************
//基本数据遍历
//************************
var bizArray = new Array(); //存放商家数组
var bizJson = null; //存放商家的json
var bizCount = 2;//商家总数
var deviceCount = 2;//设备总数
var pageSize = 10;//每次加载商家个数
var showCount = 0;//当前列表显示的商家个数
var loadCount = 2; //当前范围总共有多少个商家
var map;//百度地图
//百度地图初始化
map = new BMap.Map("allmap");
map.addControl(new BMap.NavigationControl()); //地图平移缩放控件
map.addControl(new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT})); //比例尺控件
map.addControl(new BMap.OverviewMapControl({isOpen:true})); //缩略地图控件，默认位于地图右下方，是一个可折叠的缩略地图
//map.addControl(new BMap.MapTypeControl({mapTypes: [BMAP_NORMAL_MAP,BMAP_HYBRID_MAP]})); //2D图，卫星图 //左上角， 地图类型控件
map.enableScrollWheelZoom(true);//是否可缩放
map.addEventListener("tilesloaded",function(){
$(".BMap_cpyCtrl").hide();
$(".anchorBL").hide();
});//地图加载完毕后 隐藏百度图标
map.centerAndZoom(new BMap.Point(108.95401,34.265193), 5);//设置地图中心和级别 new BMap.Point(116.404, 39.915)
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":[]}};
//**************
//创建商家信息框
//**************
function createInfoTip(biz_id)
{
var biz_Name = bizJson[biz_id]['biz_name']; //商家名称
//var is_Online = parseInt(bizJson[biz_id]['is_online']), //商家是否在线
var d_count = bizJson[biz_id]['devices'].length;//商家设备个数
var address = bizJson[biz_id]['address']; //地址
var contactName = bizJson[biz_id]['contact_name'];
var phone = bizJson[biz_id]['contact_phone'];
var type_name = bizJson[biz_id]['type_name'];
var sub_type_name = bizJson[biz_id]['sub_type_name'];
var d_html = ""; //设备信息
for(i = 0; i < d_count; i++) {
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'];
//if(i!= 0 && i%2 == 0)
// {
d_html += "<br/>";
// }
}
var sContent ="<h3 style='margin:0 0 5px 0;padding:0.2em 0;line-height:15px;'>"+ biz_Name +"</h3>" +
//"<div style='min-height:120px;'><img style='float:left;margin:4px' id='imgDemo' src='"+ imgsrc +"' width='100' height='100' title='"+mName+"'/>" +
"<p style='margin:0;line-height:1.5;font-size:13px;'>行 业：" +type_name+" - " + sub_type_name+"</p>" +
//"<p style='height:5px;'></p>" +
"<p style='margin:0;line-height:1.5;font-size:13px;'>联 系 人："+ contactName +"</p>" +
//"<p style='height:5px;'></p>" +
"<p style='margin:0;line-height:1.5;font-size:13px;'>电 话："+phone+"</p>" +
//"<p style='height:5px;'></p>" +
"<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>" +
//"<p style='height:5px;'></p>" +
//"<p style='margin:0;line-height:1.5;font-size:13px;'>简介："+feature+"</p>" +
"<p style='height:5px;'></p>" +
"<p style='margin:0;line-height:1.5;font-size:13px;'>设备总数："+ d_count +"</p>" +
"<div style='margin:0;line-height:1.5;font-size:13px;'>"+d_html+"</div>" +
"<p style='height:3px;'></p>" +
"</div>";
return sContent;
}
//*****************
//创建Marker标注
//*****************
function addMarker(biz_id) {
var biz_Name = bizJson[biz_id]['biz_name']; //商家名称
var is_Online = parseInt(bizJson[biz_id]['is_online']); //商家是否在线
//var d_count = bizJson[biz_id]['devices'].length;//商家设备个数
var biz_point = new BMap.Point(bizJson[biz_id]['lon'], bizJson[biz_id]['lat']);//商家坐标
if(0 == is_Online) //离线用灰色图标
{
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)}
var marker = new BMap.Marker(biz_point,{icon:myIcon});
}
else
{//在线用默认图标
//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)
//var marker = new BMap.Marker(point);
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)}
var marker = new BMap.Marker(biz_point,{icon:myIcon});
}
// 创建信息窗口对象
var tip = createInfoTip(biz_id);
//'http://api.map.baidu.com/images/iw3.png'
var infoWindow = new BMap.InfoWindow(tip,{300,background:null});
//添加Marker
marker.addEventListener("click", function(){
this.openInfoWindow(infoWindow);
});
//marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
marker.setTitle(biz_Name);
//setMarker(biz_id,tip,marker);
map.addOverlay(marker);
bizJson[biz_id]['marker'] = marker;
bizArray.push(biz_id);
//bizJson[biz_id]['infoWindowHtml'] = tip;
}
//加载地图数据
function initMapData()
{
//设置商家数据
$("#mapInfo").text("商家总数：" + bizCount +" 设备总数：" +deviceCount);
$("#loadMapInfo").html("当前范围商家："+ loadCount);
//循环添加Marker
for(var b in bizJson){
addMarker(b);
}
//加载列表
loadBizList(true);
}
//查看商家
function findBiz(b)
{
var ckmarker = bizJson[b]['marker'];//bizJson[2]['infoWindowHtml'
ckmarker.dispatchEvent("click");
//BMapLib.EventWrapper.trigger(ckmarker, 'click', {'type': 'onclick', target: ckmarker});
}
//全选功能
function checkBizAll(isCheck)
{
$("#tbodyMList :visible").find(":checkbox").prop("checked",isCheck);
}
//导出功能
function ExportMapExcel()
{
var bids = getCheck({obj:"#tbodyMList"});
if(bids != "")
{
$("#ids").val(bids);
$("#exportForm").submit();
//window.open('exportmapexcel?ids='+bids);
}
else
{
showAlert({msg:'请选择需要导出的商家'});
//alert("请选择需要导出的商家");
}
}
//***********************
//加载可视范围内的商家列表 flag是否是初次加载
//***********************
function loadBizList(flag,sname)
{
//按距离排序
//按距离从小到大排序
bizArray.sort(function(a,b){
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']));
});
showCount = 0;
loadCount = 0;
var alltr = "";
var slon = 0;
var slat = 0;
if(null != sname && "" != sname)
{
for (i = 0; i < bizCount; i++) {
if(bizJson[bizArray[i]]['biz_name'] == sname)
{
slon = bizJson[bizArray[i]]['lon'];
slat = bizJson[bizArray[i]]['lat'];
break;
}
}
// for(var b in bizJson){
// if(bizJson[b]['biz_name'].StartWith(sname))
// {
// slon = bizJson[b]['lon'];
// slat = bizJson[b]['lat'];
// break;
// }
// }
}
else
{
if(flag)
{
// for(var b in bizJson){
// alltr += createTr(b,loadCount);
// loadCount +=1;
// }
for (i = 0; i < bizCount; i++) {
alltr += createTr(bizArray[i],loadCount);
loadCount +=1;
}
}
else
{
for (i = 0; i < bizCount; i++) {
var result = BMapLib.GeoUtils.isPointInRect(new BMap.Point(bizJson[bizArray[i]]['lon'], bizJson[bizArray[i]]['lat']), map.getBounds());
if(result)
{
alltr += createTr(bizArray[i],loadCount);
loadCount +=1;
}
}
// for(var b in bizJson){
// var result = BMapLib.GeoUtils.isPointInRect(new BMap.Point(bizJson[b]['lon'], bizJson[b]['lat']), map.getBounds());
// if(result)
// {
// alltr += createTr(b,loadCount);
// loadCount +=1;
// }
// }
}
}
if(loadCount != 0)
{
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>';
}
$("#tbodyMList").html("").append(alltr);
$("#loadMapInfo").html("当前范围商家："+ loadCount);
if(slon != 0 && slat != 0)
{
//地图中心
map.centerAndZoom(new BMap.Point(slon, slat),12);//级别
}
}
//创建tr
function createTr(b ,trIndex)
{
var trStyle = '';
if((trIndex + 1) > pageSize)
{
trStyle = 'style="display:none;"';
//mobj.marker.setAnimation(null);
if(1 == parseInt(bizJson[b]['is_online']))
{
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)}));
}
else
{
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)}));
}
}
else{
showCount +=1;
if(1 == parseInt(bizJson[b]['is_online']))
{
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)}));
}
else
{
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)}));
}
//mobj.marker.setAnimation(BMAP_ANIMATION_BOUNCE);
}
if(b != null && b != 0)
{
var trHtml = '<tr class="trbor" '+ trStyle +' id="mtr'+trIndex+'"><td ><input type="checkbox" value="'+b+'" smid = "' + b + '" /></td>';
trHtml+= '<td >'+ bizJson[b]['biz_name'] +'</td>';
trHtml+= '<td >'+ bizJson[b]['address'] +'</td>';
trHtml+= '<td style="cursor:pointer;" onclick="findBiz('+ b +')" name="mclick">';
trHtml+= '<div name="mid" style="display:none">'+ b +'</div>';
trHtml+= '查看位置</td>';
trHtml+= '</tr>';
return trHtml;
}
return "";
}
//点击显示更多
function clickLoadMore(obj)
{
if(loadCount > showCount)
{
var lcount = (showCount + pageSize) > loadCount ? loadCount : (showCount + pageSize);
for (var i = showCount; i < lcount; i++) {
$("#mtr"+i).show();
var id = $("#mtr"+i).find("div[name='mid']").text();
showCount += 1;
if(1 == parseInt(bizJson[id]['is_online']))
{
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)}));
}
else
{
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)}));
}
}
if(loadCount == showCount)
{
$(obj).html("全部加载完毕");
}
}
}
//瀑布流
var totalheight = 0;
function loadData() {
totalheight = parseFloat($(window).height()) + parseFloat($(window).scrollTop());
if ($(document).height() <= totalheight) {
//加载数据
clickLoadMore($("#btnMore"));
}
}
//ready
$(function(){
if(bizJson != null) //如果查询到得商家不为空
{
initMapData();
$("#btnSearch").click(function () {
loadBizList(true,$("#sname").val());
});
$(window).scroll(function () {
//console.log("滚动条到顶部的垂直高度: " + $(document).scrollTop());
//console.log("页面的文档高度 ：" + $(document).height());
//console.log('浏览器的高度：' + $(window).height());
loadData();
});
map.addEventListener("moveend",function(){ loadBizList(false);});//地图移动结束事件
map.addEventListener("zoomend",function(){ loadBizList(false);});//缩放结束事件
map.addEventListener("dragend",function(){ loadBizList(false);});//拖拽结束事件
map.addEventListener("resize",function(){ loadBizList(false);});//可视区域发生变化事件
}
});
</script>
<!-- 版权开始-->
<div class="modal-footer">© Copyright 2014 Powered by e</div>
<!-- 版权结束-->
</body>
</html>