百度地圖的全景地圖實現的過程

時間 2019-11-25

標籤百度地圖全景實現過程简体版

原文原文鏈接

最近要弄百度，實現web上地圖拖動標註，停下來的時候，搜索地圖位置上的全景圖。用戶點擊全景圖後，進入全景模式。javascript

這個需求看上去很簡單。可是也費了我大半天的功夫。php

主要問題是css

1. 百度地圖沒有完整的例子html

2. 百度地圖的全景圖在PC web 和移動 web 實現方式不同java

3. 百度地圖的API 文檔，我的感受寫得通常。 jquery

OK，不總結那麼多了。聲明下，我這個是用v2.0 版本的JS API。web

首先，直接拿官方的例子api

http://developer.baidu.com/map/jsdemo.htm#j1_0app

這個例子很簡單，具體代碼就不說了。可是，這裏有一個坑，就是PC上出現下面紅框所示的標註和Info窗口。放到移動手機上就沒了。函數

本覺得是代碼寫錯，可是最後瞭解到，PC上用的是Flash技術。移動手機用的是JS技術。估計移動手機的js技術有Bug吧。

沒辦法了，只能本身畫Marker，添加Label了。可是怎麼根據經緯讀，獲取這個位置上的全景信息呢？

原來有這個對象

var panoramaService = new BMap.PanoramaService();

panoramaService.getPanoramaByLocation(new BMap.Point(lng, lat), function(data){
var panoramaInfo="";
if (data == null) {
$("#myDesc").html("");
return;
}
myData = data;
panoramaInfo +='全景id爲：'+data.id+'\n';
panoramaInfo +='座標爲：'+data.position.lng+':'+data.position.lat+'\n';
//alert(panoramaInfo);
getImg(data);
});

另一個問題，又如何獲取全景靜態圖片呢？

查了半天，原來有 "全景靜態圖API" (http://lbsyun.baidu.com/index.php?title=viewstatic)

因而寫了一個函數，獲取圖片，這個函數太簡單了

function getImg(data)
{
$("#myImg").attr('src',"http://api.map.baidu.com/panorama/v2?ak=你的key&width=120&height=100&location="+data.position.lng+","+data.position.lat+"&fov=180");
$("#myDesc").html(data.description);
}

可是獲取圖片，如何進入全景圖呢，原來能夠這樣子

var panorama = map.getPanorama();//獲取實例對象
panorama.setId(myData.id); //全景ID
panorama.show(); //顯示全景

基本思路搞定了，剩下的事情就好辦了。直接上代碼，童鞋本身改改用吧。

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<style type="text/css">
		body, html {width: 100%;height: 100%;margin:0;font-family:"微軟雅黑";}
		#allmap{width:100%;height:500px;}
		p{margin-left:5px; font-size:14px;}
	</style>
	<script type="text/javascript" src="jquery.min.js"></script>
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的appkey"></script>
	<title>顯示全景控件</title>
	<style>
	.marker {float:left;width:120px;height:100px;}
	#myDesc{float:left;}
	#myImg{width:120px;height:80px;}
	</style>
</head>
<body>
	<div id="allmap"></div>	
	<p>在地圖上拖動標註，點擊圖片查看全景圖</p>	
</body>
</html>
<script type="text/javascript">   
	var map = new BMap.Map('allmap');
	var panoramaService = new BMap.PanoramaService(); 
	var marker2;
	var myData;
	
    var geolocation = new BMap.Geolocation();
	geolocation.getCurrentPosition(function(r){
		if(this.getStatus() == BMAP_STATUS_SUCCESS){
			map.centerAndZoom(new BMap.Point(r.point.lng, r.point.lat), 16);			
		}
		
		map.enableScrollWheelZoom(true);
		// 覆蓋區域圖層測試
		map.addTileLayer(new BMap.PanoramaCoverageLayer());		

		//var stCtrl = new BMap.PanoramaControl(); //構造全景控件
		//stCtrl.setOffset(new BMap.Size(20, 20));
		//map.addControl(stCtrl);//添加全景控件
		//stCtrl.addEventListener("click",function (t){alert("ok");});
		
		 //var panorama = new BMap.Panorama('panorama'); //默認爲顯示導航控件 
        //panorama.setPosition(new BMap.Point(r.point.lng,r.point.lat));
		
		//建立小狐狸
	var pt = new BMap.Point(r.point.lng, r.point.lat);
	var myIcon = new BMap.Icon("location.png",new BMap.Size(24,28));
	myIcon.setImageSize(new BMap.Size(24,28));
	marker2 = new BMap.Marker(pt,{icon:myIcon});  // 建立標註
	marker2.enableDragging();
	
	var opts = {	
      position : pt, 	
	  offset   : new BMap.Size(-55, -105)    //設置文本偏移量
	}
	
	var lableContent="<div class=\"marker\"><img id=\"myImg\" src=\"noImg.png\"/><div id=\"myDesc\"></div></div>";
	
	var myLabel = new BMap.Label(lableContent,opts); 
	marker2.setLabel(myLabel);
	
	map.addOverlay(marker2);
	
	myLabel.addEventListener("click",function (obj){
	        if (myData != null){
			   debugger;
			   var panorama = map.getPanorama();//獲取實例對象
			   panorama.setId(myData.id);
                    panorama.show();
			}
	    });

marker2.addEventListener("dragend",function (t){ 
              myData = null;             
              var p = marker2.getPosition(); 			  
              test( p.lng,p.lat);			  

              //alert("marker的位置是" + p.lng + "," + p.lat);
			  
		 });	
	
	},{enableHighAccuracy: true});
	
	
	
	function test(lng,lat)
	{
        $("#myDesc").html("加載中......");	
        panoramaService.getPanoramaByLocation(new BMap.Point(lng, lat), function(data){   
			var panoramaInfo="";  
			if (data == null) {  
				$("#myDesc").html("");	
				return;  
			} 
 		    myData = data; 
			panoramaInfo +='全景id爲：'+data.id+'\n';  
			panoramaInfo +='座標爲：'+data.position.lng+':'+data.position.lat+'\n';  
			//alert(panoramaInfo); 
            getImg(data);
       });  
     }
	 
	 function getImg(data)
	 {
         $("#myImg").attr('src',"http://api.map.baidu.com/panorama/v2?ak=你的key&width=120&height=100&location="+data.position.lng+","+data.position.lat+"&fov=180");
		 $("#myDesc").html(data.description);
	 }
	
</script>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。