最近要弄百度，实现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+'\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(); //显示全景

 

基本思路搞定了，剩下的事情就好办了。直接上代码，童鞋自己改改用吧。

	
     	
     						
     
		
在地图上拖动标注，点击图片查看全景图