Question

我试图通过谷歌地图api街景显示商家的内部。我首先检索places_id并使用它来检索可能可用的任何街景全景图。这是在本周早些时候工作，并已停止。但我无法弄明白为什么。显示交互式地图的div显示为灰色，带有一些google工件，并且在控制台中记录了一条错误，Google生成的网址返回了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

仅供参考，.getPanorama函数是v3.21（v.exp）中的新函数，在此之前（v3.20及更早版本）它是.getPanoramaById和.getPanoramaByLocation。我怀疑你下面的API发生了变化（实验版本，你默认服务的版本从v3.20变为v3.21）
您永远不会使用Google Maps Javascript API（results.geometry.location.A，results.geometry.location.F）的未记录属性，这些属性可以随时改变发布API。在大多数地方使用这些，您只需使用返回的google.maps.LatLng而不是创建新的。{/ p>
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

代码段

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>

Google Maps API街景视图显示为灰色

1 个答案: