随着对Google地图的最新更改，用于获取将片段嵌入其他网页的HTML片段的UI已丢失。如何获得特定的光球？
因此，如果可以找到像here那样的光球，我如何使用Google Maps API将其嵌入到网页中？
我尝试两种方法：
与https://developers.google.com/photo-sphere/web/描述的方法，我无法找到在URL中最近的PanoId。我尝试了其他随机的URL，看看它是否可行，但事实并非如此。
用https://developers.google.com/maps/documentation/javascript/examples/streetview-simple描述的方法，我指定了上述光球的坐标，但服务返回的光球不是我想要的。我想要我自己编写的那个。
起初： 自定义全景不会马上公布，这将需要一些时间，直到他们将通过API
你的第二个方法对我的作品面世，也许准确率不足够。 当我去你的google + -profile的位置将是-23.55, -46.631，这将返回一个不同的全景图。但是，当我点击照片的详细信息在地图上，我得到的页面更精确的结果将被打开：
-23.550201666666666,-46.63147500000002
当我使用这个位置我得到想要的全景，在最近的PanoId是
PB0KYqVf9S0AAAQY__M_XQ
function init() {
var goo = google.maps,
map = new goo.Map(document.getElementById('map'), {
center : {lat: -23.5502017, lng: -46.631475},
zoom : 14,
noClear : true,
disableDefaultUI : true,
streetViewControl : true
}),
form = map.getDiv().querySelector('form'),
input = document.getElementById('latlng'),
desc = document.getElementById('desc'),
pano = document.getElementById('pano'),
pid = document.getElementById('pid'),
sv = new google.maps.StreetViewService();
map.setStreetView(new goo.StreetViewPanorama(pano,{
disableDefaultUI:true
}));
input.value=map.getCenter().toUrlValue();
map.controls[google.maps.ControlPosition.RIGHT_BOTTOM]
.push(form);
map.controls[google.maps.ControlPosition.TOP_LEFT]
.push(pano);
map.controls[google.maps.ControlPosition.TOP_CENTER]
.push(desc);
google.maps.event.addListener(map,'get_pano',function(e){
sv.getPanorama({location: e.latlng, radius: 50}, function(data,status){
map.getDiv().className=status;
if (status === goo.StreetViewStatus.OK) {
map.getStreetView().setPano(data.location.pano);
pid.value=data.location.pano;
desc.innerHTML=data.location.description;
}
else{
desc.innerHTML='no streetview available';
pid.value='';
}
google.maps.event.trigger(map,'resize');
});
});
google.maps.event.addListener(map,'click',function(e){
input.value=e.latLng.toUrlValue();
google.maps.event.trigger(form,'submit');
});
google.maps.event.addDomListener(form,'submit',function(e){
if(e)e.preventDefault();
var ll=input.value.split(','),
r=[85,180],p=['lat','lng'],f,latlng={},err=false;
if(ll.length===2){
for(var i=0;i<ll.length;++i){
f=parseFloat(ll[i]);
if(Math.abs(f)<=r[i]){
latlng[p[i]]=f;
}
else{
err=true;
}
}
}
else{
err=true;
}
if(err){
alert('invalid coordinates')
}
else{
google.maps.event.trigger(map,'get_pano',{latlng:latlng})
}
return false;
});
google.maps.event.trigger(form,'submit');
}html, body,#map {
height: 100%;
margin: 0;
padding: 0;
}
#pano{
height:100px;
width:150px;
}
#pid,#pano{
display:none;
}
#map>form{
display:none;
}
#pid{
background:Chartreuse;
}
#map.OK #pid,#map.OK #pano,#map.OK #desc{
display:block;
}
#desc{
background:tomato !important;
}
#map.OK #desc{
background:rgba(0,255,0, .8) !important;
}
#map form,#desc{
text-align:center;
padding:6px;
background:rgba(255,255,255, .8);
border:1px solid #000;
border-radius:4px;
}
#desc{
background:rgba(255,0,0, .8);
}
#map form,#pano{
margin:4px;
}
<div id="map">
<form>
<input id="latlng" placeholder="latitude,longitude"><br/><input type="submit"><br/>
<input id="pid" readonly>
<div id="pano"></div>
<div id="desc"></div>
</form>
</div>
<script async defer
src="https://maps.googleapis.com/maps/api/js?v=3&callback=init">
</script>