这段时间,所在项目中要用到的一个模块,就是让数据库中的内容在百度地图上展现出来,如经纬度。
主要实现以下几点功能:
1.读取数据库中的经纬度值在百度上标注出来。
2.点击标注弹出对应信息。
3.可拖拽标注,并能实时显示移动后标注的经纬度及地址。
页面展示如下:
第一步:调用自定义地图展示函数
因为地图展示函数需数据统计完成后才执行,数据统计代码另一篇文章中有介绍
function dataNum(types,temp){
}
第二步:创建map实例
var map = new BMap.Map("container"); // 创建Map实例
var point=new BMap.Point(113.183265,23.034994);
map.centerAndZoom(point,15);
map.enableScrollWheelZoom();
map.addControl(new BMap.NavigationControl()); //添加默认缩放平移控件
第三步:读取数据库中数据(jsonp可跨域)
//数据库提取经纬数据
var type="machine";
var params = {"token": getStorage("token"), "flag":1};
var parameter_str="";
for(var key in params){
parameter_str+="&"+key+"="+params[key];
}
var fullurl=getOption("gykj_host")+type+"/list"+"?"+getOption("gykj_callbackparam")+"="+getOption("gykj_callbackfunc")+parameter_str;
//$("#breadcrumbs").html(fullurl);
$.ajax({
url:fullurl,
type:'get',
dataType:"jsonp",
jsonp:getOption("gykj_callbackparam"),
jsonpCallback:getOption("gykj_callbackfunc"),
async:false,
error:function(){
alert("列表:"+getOption("connectionErrorMessage"));
},
success:function(data){
if(data.resultCode==getOption("resultcode_success")){
var i=0;
for(var item in data.data){
//alert(data.data[item].longitude);
machines=data.data;
//alert(data.data[item].m_id);
var longitude="";
var latitude="";
if(data.data[item].longitude!=null){
longitude=data.data[item].longitude;
}
if(data.data[item].latitude!=null){
latitude=data.data[item].latitude;
}
if(longitude!="" || latitude!="" ){
var m_name=data.data[item].m_name;
point =new BMap.Point(longitude,latitude);
addMarker(point);
}//. if(longitude!="" || latitude!="" )
}//.for(
}//.if(data.resultCode
}//. success
})//. $.ajax
第四步:对读取出的经纬度进行标注
// 编写自定义函数,创建标注并可拖拽
function addMarker(point){
var marker = new BMap.Marker(point);
map.addOverlay(marker);
marker.enableDragging();
}// .addMarker
第五步:在标注函数内监听地图标注,标注位置改变,实时显示移动后的标注及地址。
var gc = new BMap.Geocoder();
marker.addEventListener("dragend",function(){
var marketpoint=marker.getPosition(); //获取一个点
document.getElementById("longitude").value=marketpoint.lng;
document.getElementById("latitude").value=marketpoint.lat;
gc.getLocation(marketpoint, function(rs){
var addComp = rs.addressComponents;
document.getElementById("address").value=(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);
});
});//.addEventListener dragend
第六步:在标注函数内监听地图标注,点击标注弹出对应信息内容
marker.addEventListener("click", function(){
this.openInfoWindow(infoWindow);
//图片加载完毕重绘infowindow
document.getElementById('imgDemo').onload = function (){
infoWindow.redraw(); //防止在网速较慢,图片未加载时,生成的信息框高度比图片的总高度小,导致图片部分被隐藏
}
});
注:在标注函数外 创建信息窗口对象及内容以便调用。
var infoWindow = new BMap.InfoWindow(sContent); // 创建信息窗口对象
var sContent =
"<h4 style='margin:0 0 5px 0;padding:0.2em 0'>桂城行政服务中心</h4>" +
"<a href=\"test.png\" id='colorBox' class='ajax' ><img style='float:right;margin:4px' id='imgDemo' src='test.png' width='533' height='300' title='桂城行政服务中心'/></a>" +
"<p style='margin:0;line-height:1.5;font-size:13px;'>机器运行正常</p>" +
"<p style='margin:0;line-height:1.5;font-size:13px;'>开关机模块正常</p>" +
"<p style='margin:0;line-height:1.5;font-size:13px;'>正在播放公益视频</p>" +
"<p style='margin:0;line-height:1.5;font-size:13px;'>开机时间:2015年6月17日 10时34分</p>" +
"<p style='margin:0;line-height:1.5;font-size:13px;'>数据更新时间:2015年6月17日 7时30分</p>" +
"</div>";
完整代码如下:
function setMap(address){/*地图*/
var map = new BMap.Map("container"); // 创建Map实例
var point=new BMap.Point(113.183265,23.034994);
map.centerAndZoom(point,15);
map.enableScrollWheelZoom();
map.addControl(new BMap.NavigationControl()); //添加默认缩放平移控件
//数据库提取经纬数据
var type="machine";
var params = {"token": getStorage("token"), "flag":1};
var parameter_str="";
for(var key in params){
parameter_str+="&"+key+"="+params[key];
}
var fullurl=getOption("gykj_host")+type+"/list"+"?"+getOption("gykj_callbackparam")+"="+getOption("gykj_callbackfunc")+parameter_str;
//$("#breadcrumbs").html(fullurl);
$.ajax({
url:fullurl,
type:'get',
dataType:"jsonp",
jsonp:getOption("gykj_callbackparam"),
jsonpCallback:getOption("gykj_callbackfunc"),
async:false,
error:function(){
alert("列表:"+getOption("connectionErrorMessage"));
},
success:function(data){
if(data.resultCode==getOption("resultcode_success")){
var i=0;
for(var item in data.data){
//alert(data.data[item].longitude);
machines=data.data;
//alert(data.data[item].m_id);
var longitude="";
var latitude="";
if(data.data[item].longitude!=null){
longitude=data.data[item].longitude;
}
if(data.data[item].latitude!=null){
latitude=data.data[item].latitude;
}
if(longitude!="" || latitude!="" ){
//数据
var m_name=data.data[item].m_name;
var statepic="";
var switcherbotton="";
statepic='<span class="label label-success ">终端在线</span>';
if(data.data[item].autoSwitcher!=null&&data.data[item].autoSwitcher!=""){
if(data.data[item].autoSwitcher.state==0){
switcherbotton+='<span class="label label-warning ">开关离线</span>'
}else{
switcherbotton='<button type="button" class="btn btn-xs btn-danger" data-toggle="button" οnclick="switcheroff(\''+data.data[item].autoSwitcher.ip+'\')">关机</button>';
}
}
if(data.data[item].working_state==0){
statepic='<span class="label label-warning ">终端离线</span>';
if(data.data[item].autoSwitcher!=null&&data.data[item].autoSwitcher!=""){
if(data.data[item].autoSwitcher.state==0){
switcherbotton+='<span class="label label-warning ">开关离线</span>'
}else{
switcherbotton='<button type="button" class="btn btn-xs btn-info" data-toggle="button" οnclick="switcheron(\''+data.data[item].autoSwitcher.ip+'\')">开机</button>';
}
}
}
statepic+=switcherbotton;
var screencap="";
if(data.data[item].screencaps!=null&&data.data[item].screencaps.length>0){
screencap='<img src="/Weather'+data.data[item].screencaps[0].pic+'" width="20%"/>';
}
//.数据
point =new BMap.Point(longitude,latitude);
addMarker(point);
var sContent =
"<h4 style='margin:0 0 5px 0;padding:0.2em 0'>"+m_name+"</h4>" +screencap +
"<p style='margin:0;line-height:1.5;font-size:13px;'>状态:"+statepic+"</p>" +
"</div>";
var infoWindow = new BMap.InfoWindow(sContent); // 创建信息窗口对象
// 编写自定义函数,创建标注
function addMarker(point){
var marker = new BMap.Marker(point);
map.addOverlay(marker);
marker.enableDragging();
var gc = new BMap.Geocoder();
marker.addEventListener("dragend",function(){
var marketpoint=marker.getPosition(); //获取一个点
document.getElementById("longitude").value=marketpoint.lng;
document.getElementById("latitude").value=marketpoint.lat;
gc.getLocation(marketpoint, function(rs){
var addComp = rs.addressComponents;
document.getElementById("address").value=(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);
});
});//.addEventListener dragend
marker.addEventListener("click", function(){
this.openInfoWindow(infoWindow);
//图片加载完毕重绘infowindow
document.getElementById('imgDemo').onload = function (){
infoWindow.redraw(); //防止在网速较慢,图片未加载时,生成的信息框高度比图片的总高度小,导致图片部分被隐藏
}
});
}// .addMarker
}// . if(longitude!="" || latitude!="" )
i=i+1;
}//.for
}else{
alert("错误代码"+data.errorCode+":"+data.message);
}
}//success
})
}// /.setMap
百度地图API详解
一、调用API的基本文件格式
<html> <head> <!--引用百度地图--> <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"> </script> <title> 如何调用API </title> <!-- 设计样式 container容器:占50%大小 --> <style type="text/css"> #container{ width:50%; height:50%; } </style> </head> <body> <div id="container"></div> <script type="text/javascript"> var map = new BMap.Map("container");//在container容器中创建一个地图,参数container为div的id属性; var point = new BMap.Point(500,500);//定位 map.centerAndZoom(point,15); //将point移到浏览器中心,并且地图大小调整为15; <!--以后只需要在此处添加代码即可--> </script> </body> </html>
二、常用技术
1.创建地图: var map = new BMap.Map("divid");
2.创建坐标点:var point = new BMap.Point("经度","纬度");
3.设置视图中心点:map.centerAndZoom(point,size);
4.激活滚轮调整大小功能:map.enableScrollWheelZoom();
5.添加控件:map.addControl(new BMap.Xxx());
6.添加覆盖物:map.addOverlay();
三、控件介绍
1.NavigationControl:缩放地图的控件,默认在左上角;
2.OverviewMapControl:地图的缩略图的控件,默认在右下方;
3.ScaleControl:地图显示比例的控件,默认在左下方;
4.MapTypeControl:地图类型控件,默认在右上方;
map.addControl()方法添加控件;
<html> <head> <!--引用百度地图--> <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"> </script> <title> 控件使用 </title> <!-- 设计样式 container容器:占50%大小 --> <style type="text/css"> #container{ width:50%; height:50%; } </style> </head> <body> <div id="container"></div> <script type="text/javascript"> var map = new BMap.Map("container");//在container容器中创建一个地图,参数container为div的id属性; var point = new BMap.Point(500,500);//定位 map.centerAndZoom(point,15); //将point移到浏览器中心,并且地图大小调整为15; map.addControl(new BMap.NavigationControl()); map.addControl(new BMap.MapTypeControl()); map.addControl(new BMap.ScaleControl()); map.addControl(new BMap.OverviewMapControl()); </script> </body> </html>
四、覆盖物介绍
覆盖物就是覆盖在地图上的某个事物;
1.标注:Marker
(1)在point处添加标注:var marker = new BMap.Marker(point);
(2)添加覆盖物:map.addOverlay(marker);
(3)激活标注的拖拽功能:marker.enableDragging();
(4)为标注添加事件:marker.addEventListener("名称",function(){
//点击标注后的事件
});
(5)删除覆盖物:map.removeOverlay(marker);
(6)销毁标注:marker.dispose();
2.信息窗口:InfoWindow
(1)在某个特定的位置创建一个信息窗口:var infowindow = new BMap.InfoWindow("内容",{width:250,height:100,title:"hello"});
(2)在地图中央打开信息窗口:map.openInfoWindow(infoWindow,map.getCenter());
3.折线:Polyline
(1)var polyline = new BMap.Polyline([new BMap.Point(X1,Y1),new BMap.Point(X2,Y2),new BMap.Point(X3,Y3)],{strokeColor:"blue", strokeWeight:6, strokeOpacity:0.5});
(2)map.addOverlay(polyline);
<html> <head> <!--引用百度地图--> <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"> </script> <title> 如何调用API </title> <!-- 设计样式 container容器:占50%大小 --> <style type="text/css"> #container{ width:50%; height:50%; } </style> </head> <body> <div id="container"></div> <script type="text/javascript"> var map = new BMap.Map("container");//在container容器中创建一个地图,参数container为div的id属性; var point = new BMap.Point(116.404, 39.915);//定位 map.centerAndZoom(point,15); //将point移到浏览器中心,并且地图大小调整为15; //标注 var marker = new BMap.Marker(point); map.addOverlay(marker); marker.addEventListener("click",function(){ //点击标注时出发事件 alert("您点击了标注"); }); marker.enableDragging(); //标注可拖拽 //创建信息窗口 var opts = { width : 250, // 信息窗口宽度 height: 100, // 信息窗口高度 title : "Hello" // 信息窗口标题 } var infoWindow = new BMap.InfoWindow("World", opts); // 创建信息窗口对象 map.openInfoWindow(infoWindow, map.getCenter()); // 打开信息窗口 //折线 var polyline = new BMap.Polyline([ new BMap.Point(116.399, 39.910), new BMap.Point(116.405, 39.920), new BMap.Point(117.321,40.321) ], {strokeColor:"blue", strokeWeight:6, strokeOpacity:0.5} //蓝色、宽度为6 ); map.addOverlay(polyline); </script> </body> </html>
五 监听
addEventListenter
百度地图API如何给自定义覆盖物添加事件