首页 > 数据库技术 > 详细

工作经验谈之-让百度地图API调用数据库内容

时间：2015-10-08 18:16:30      阅读：382      评论：0      收藏：0      [点我收藏+]

这段时间，所在项目中要用到的一个模块，就是让数据库中的内容在百度地图上展现出来，如经纬度。

主要实现以下几点功能：

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" onclick="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" onclick="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调用数据库内容

原文：http://www.cnblogs.com/mailan/p/4861654.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
分享档案
更多>
2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)
最新文章
更多>
教程昨日排行
更多>
友情链接
汇智网   PHP教程   插件网  
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣，分享程序人生！