工作經驗談之-讓百度地圖API調用數據庫內容 及詳解

這段時間，所在項目中要用到的一個模塊，就是讓數據庫中的內容在百度地圖上展現出來，如經緯度。

主要實現以下幾點功能：

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詳解

 一、調用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如何給自定義覆蓋物添加事件