百度地图的全景地图实现的过程
最近要弄百度，實現web上地圖拖動標注，停下來的時候，搜索地圖位置上的全景圖。用戶點擊全景圖后，進入全景模式。
這個需求看上去很簡單。但是也費了我大半天的功夫。
主要問題是
1. 百度地圖沒有完整的例子
2. 百度地圖的全景圖在PC web 和移動 web 實現方式不一樣
3. 百度地圖的API 文檔，個人感覺寫得一般。
OK，不總結那么多了。聲明下，我這個是用v2.0 版本的JS API。
首先，直接拿官方的例子
http://developer.baidu.com/map/jsdemo.htm#j1_0
這個例子很簡單，具體代碼就不說了。但是，這里有一個坑，就是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+'
';
panoramaInfo +='坐標為：'+data.position.lng+':'+data.position.lat+'
';
//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 { 100%;height: 100%;margin:0;font-family:"微軟雅黑";}
#allmap{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;120px;height:100px;}
#myDesc{float:left;}
#myImg{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+'
';
panoramaInfo +='坐標為：'+data.position.lng+':'+data.position.lat+'
';
//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>
總結
以上是生活随笔為你收集整理的百度地图的全景地图实现的过程的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 3%的税率怎么算（税费计算公式）
- 下一篇： 反穿鞋子可以纠正八字脚么 八字脚如何矫正