如何获得特定的光球？

Question

随着Google地图的最新变化，用于获取用于将光球嵌入另一个网页的HTML代码段的用户界面已失踪。

因此，考虑到可以找到here之类的光球，我如何使用Google Maps API将其嵌入网页？

我尝试了两种方法：

1. 使用https://developers.google.com/photo-sphere/web/中描述的方法，我无法在URL中找到panoid。我尝试了URL的其他随机部分，看看它是否可行，但事实并非如此。

2. 使用https://developers.google.com/maps/documentation/javascript/examples/streetview-simple中描述的方法，我指定了上述光球的坐标，但该服务返回的光球不是我想要的那个。我想要一个我自己创作的那个。

Answer 1

起初： 自定义全景图不会立即发布，需要一些时间才能通过API

获取

你的第二种方法对我有用，也许准确性不够。 当我转到您的google + -profile时，该位置将为-23.55, -46.631，这将返回不同的全景图。但是当我点击照片细节中的地图时，我会在打开的页面中得到更精确的结果：

-23.550201666666666,-46.63147500000002

当我使用这个位置时，我得到了所需的全景图，panoid是

PB0KYqVf9S0AAAQY__M_XQ

＆＃13;

＆＃13;

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');
}

＆＃13;

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;
      }
      
      

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;