我目前正在使用Google Street View Panorama embed,我希望获得特定地址的POV(更具体地说是标题)。
Google通过maps.google.com执行此操作,在这里,如果有地址,它会让您进入街景,并且将面向正确的方向。但是,我似乎无法找到/找到通过API找到POV标题的方法的文档。
我可以使用LatLng
使街景视图嵌入工作正常,但相机通常面向错误的方向。有什么想法吗?
修改:清晰度
我想设置POV,但我不知道将它设置为什么值......
答案 0 :(得分:41)
所需地址的latLng和全景位置的latLng(街景车从拍摄图像的位置)不一样。据我所知,API没有在地址latlng的正确方向上设置标题,你必须自己设置。
我就是这样做的,我使用StreetViewService查找最近的可用全景图,然后使用computeHeading方法计算Pov标题here
答案 1 :(得分:34)
manubkk说的是,我使用以下代码来获得正确的SV标题
var $this = $(this),
_lat = $this.data("lat"),
_lng = $this.data("lng"),
streetViewMaxDistance = 100;
var point = new google.maps.LatLng(_lat,_lng);
var streetViewService = new google.maps.StreetViewService();
var panorama = spaces.map.map.getStreetView();
// We get the map's default panorama and set up some defaults.
// Note that we don't yet set it visible.
//panorama = spaces.map.map.getStreetView();
streetViewService.getPanoramaByLocation(point, streetViewMaxDistance, function (streetViewPanoramaData, status) {
if(status === google.maps.StreetViewStatus.OK){
var oldPoint = point;
point = streetViewPanoramaData.location.latLng;
var heading = google.maps.geometry.spherical.computeHeading(point,oldPoint);
panorama.setPosition(point);
panorama.setPov({
heading: heading,
zoom: 1,
pitch: 0
});
panorama.setVisible(true);
}else{
$this.text("Sorry! Street View is not available.");
// no street view available in this range, or some error occurred
}
});
答案 2 :(得分:4)
原因是街景POV默认是拍摄图像时卡车所朝向的方向(图)。您需要获取卡车的位置和房屋的位置,并计算一个"标题"从第一个位置到第二个位置:
// adrloc=target address
// svwloc=street-view truck location
svwService.getPanoramaByLocation(adrloc,svwdst,function(dta,sts) {
if(sts==google.maps.StreetViewStatus.OK) {
var svwloc=dta.location.latLng;
var svwhdg=google.maps.geometry.spherical.computeHeading(svwloc,adrloc);
var svwmap=avwMap.getStreetView();
svwmap.setPosition(svwloc);
svwmap.setPov({ heading: svwhdg, pitch: 0 });
svwMarker=new google.maps.Marker({ map:svwmap, position: adrloc });
svwmap.setVisible(true);
}
else {
...
}
使用街景的另一个技巧/陷阱是,您需要通过反复调用getPanoramaByLocation
并逐渐增加距离来获取距您地址最近的街道视图,直到您成功或达到最大距离为止。我用这段代码解决了这个问题:
var SVW_MAX=100; // maximum street-view distance in meters
var SVW_INC=10; // increment street-view distance in meters
var svwService=new google.maps.StreetViewService(); // street view service
var svwMarker=null; // street view marker
// NOTE: avwMap is the aerial view map, code not shown
...
resolveStreetView(avwMap.getCenter(),SVW_INC);
...
var resolveStreetView=function(adrloc,svwdst) {
svwService.getPanoramaByLocation(adrloc,svwdst,function(dta,sts) {
if(sts==google.maps.StreetViewStatus.OK) {
var svwloc=dta.location.latLng;
var svwhdg=google.maps.geometry.spherical.computeHeading(svwloc,adrloc);
var svwmap=avwMap.getStreetView();
svwmap.setPosition(svwloc);
svwmap.setPov({ heading: svwhdg, pitch: 0 });
svwMarker=new google.maps.Marker({ map:svwmap, position: adrloc });
svwmap.setVisible(true);
}
else if(svwdst<SVW_MAX) {
resolveStreetView(adrloc,svwdst+SVW_INC);
}
});
}
答案 3 :(得分:3)
我发现这个页面非常有用,谢谢你们。我仍然需要将这个和几个来源的完整解决方案拼凑起来,所以我想我会把它包含在这里。
<script>
var panorama;
function loadStreetView() {
var _lat = your_lat;
var _lng = your_long;
var target = new google.maps.LatLng(_lat,_lng);
var sv = new google.maps.StreetViewService();
panorama = new google.maps.StreetViewPanorama(document.getElementById('hero-street-view'));
var pano = sv.getPanoramaByLocation(target, 50, function(result, status) {
if (status == google.maps.StreetViewStatus.OK) {
var heading = google.maps.geometry.spherical.computeHeading(result.location.latLng, target);
panorama.setPosition(result.location.latLng);
panorama.setPov({
heading: heading,
pitch: 0,
zoom: 1
});
panorama.setVisible(true);
}
else {
console.log("Cannot find a street view for this property.");
return;
}
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=geometry&callback=loadStreetView">
</script>
答案 4 :(得分:-1)
答案 5 :(得分:-3)
无法判断您是否想要获取或设置POV
按照此处的说明进行设置:http://code.google.com/apis/maps/documentation/javascript/services.html#StreetViewPanoramas
var panoramaOptions = {
position: fenway,
pov: {
heading: 34,
pitch: 10,
zoom: 1
}
};
得到:
alert( panoramaOptions.pov.heading );