Google Maps API 街景显示为灰色

Question

我正在尝试通过 google maps api 街景显示企业内部。我首先检索places_id 并使用它来检索可能可用的任何街景全景图。这在本周早些时候起作用并且已经停止。不过，我不知道为什么。显示交互式地图的 div 显示为灰色，并带有一些 google 工件，并且控制台记录了一个错误，即 google 生成的 url 返回了 404。有人遇到过这种情况吗？

下面的代码也在我的JS Fiddle

var map;
var panorama;

$('#thebutton').click(function () {

    map = new google.maps.Map(document.getElementById('map-canvas'));
    var infowindow = new google.maps.InfoWindow();
    var place_id = 'ChIJ-_RcvsBV2YARhkUbjSD3Vi4';
    var placeservice = new google.maps.places.PlacesService(map);
    var placesRequest = {
        placeId: place_id
    };

    placeservice.getDetails(placesRequest, function (results, status) {

        if (status == google.maps.places.PlacesServiceStatus.OK) {
            var marker = new google.maps.Marker({
                map: map,
                position: results.geometry.location
            });
            google.maps.event.addListener(marker, 'click', function () {
                infowindow.setContent(results.name);
                infowindow.open(map, this);
            });
            var brewerystreetview = new google.maps.LatLng(results.geometry.location.A, results.geometry.location.F);

            var sv = new google.maps.StreetViewService();
            panorama = new google.maps.StreetViewPanorama(document.getElementById('pano'), {
                center: new google.maps.LatLng(results.geometry.location.lat(), results.geometry.location.lng()),
                zoom: 0
            });
            sv.getPanorama({
                location: brewerystreetview,
                radius: 0
            }, processSVData);
        }
    });
});

function processSVData(data, status) {

    if (status == google.maps.StreetViewStatus.OK) {
        var marker = new google.maps.Marker({
            position: data.location.latLng,
            map: map,
            title: data.location.description
        });

        panorama.setPano(data.location.pano);
        panorama.setPov({
            heading: 0,
            pitch: 0
        });
        panorama.setVisible(true);

        google.maps.event.addListener(marker, 'click', function () {

            var markerPanoID = data.location.pano;
            // Set the Pano to use the passed panoID.
            panorama.setPano(markerPanoID);
            panorama.setPov({
                heading: 0,
                pitch: 0
            });
            panorama.setVisible(true);
            panorama.show();
        });
    }
}

Answer 1

1. 仅供参考，.getPanorama 函数是 v3.21 (v.exp) 中的新功能，在此之前（v3.20 及更早版本）它是 .getPanoramaById 和 .getPanoramaByLocation。我怀疑你下面的 API 发生了变化（默认为你提供的实验版本从 v3.20 更改为 v3.21）

2. 您应该永远使用 Google Maps Javascript API 的未记录属性（results.geometry.location.A、results.geometry.location.F），这些属性可以而且确实会随着每个API 的发布。在您使用这些的大多数地方，您可以只使用返回的google.maps.LatLng，而不是创建一个新的。

3. StreetViewPanorama 没有center 选项，应该是position：

panorama = new google.maps.StreetViewPanorama(document.getElementById('pano'), {
    center: results.geometry.location,
    zoom: 0
});     

应该是：

panorama = new google.maps.StreetViewPanorama(document.getElementById('pano'), {
    position: results.geometry.location,
    zoom: 0
});

updated fiddle

代码 sn-p：

var map;
var panorama;

$('#thebutton').click(function() {
  map = new google.maps.Map(document.getElementById('map-canvas'));
  var infowindow = new google.maps.InfoWindow();
  var place_id = 'ChIJ-_RcvsBV2YARhkUbjSD3Vi4';
  var placeservice = new google.maps.places.PlacesService(map);
  var placesRequest = {
    placeId: place_id
  };
  placeservice.getDetails(placesRequest, function(results, status) {
    if (status == google.maps.places.PlacesServiceStatus.OK) {
      var marker = new google.maps.Marker({
        map: map,
        position: results.geometry.location
      });
      google.maps.event.addListener(marker, 'click', function() {
        infowindow.setContent(results.name);
        infowindow.open(map, this);
      });
      var brewerystreetview = results.geometry.location;

      var sv = new google.maps.StreetViewService();
      panorama = new google.maps.StreetViewPanorama(document.getElementById('pano'), {
        position: results.geometry.location,
        zoom: 0
      });
      sv.getPanorama({
        location: brewerystreetview,
        radius: 0
      }, processSVData);
    }
  });
});

function processSVData(data, status) {
  if (status == google.maps.StreetViewStatus.OK) {
    var marker = new google.maps.Marker({
      position: data.location.latLng,
      map: map,
      title: data.location.description
    });

    panorama.setPano(data.location.pano);
    panorama.setPov({
      heading: 0,
      pitch: 0
    });
    panorama.setVisible(true);

    google.maps.event.addListener(marker, 'click', function() {

      var markerPanoID = data.location.pano;
      // Set the Pano to use the passed panoID.
      panorama.setPano(markerPanoID);
      panorama.setPov({
        heading: 0,
        pitch: 0
      });
      panorama.setVisible(true);
      panorama.show();
    });
  }
}

 div#pano {
   width: 100%;
   height: 400px;
   float: left;
 }
 div#map-canvas {
   width: 100%;
   height: 25%;
   float: left;
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>
<div class="container" id="infocontainer" style=""><a href="#" class="btn btn-primary" id="thebutton" onclick="return false;">Click here</a>
</div>
<div id="pano"></div>
<div id="map-canvas"></div>