javascript - Google Street View JS 让我看到房子的侧面而不是正面

Question

使用 Google 示例中的示例和 Stack Overflow 上找到的其他代码，我组合了一些 JS，它获取街道地址并显示俯 View 和街景 View 。在大多数情况下，它们工作得很好，但当房子在拐 Angular 处时，它们就会坏掉。

当房子在拐 Angular 处时，它有时会向我显示房子的侧面而不是房子的正面。 If I go directly to Google Maps and search for that address, the Street View it shows is actually the front of the house ，所以我知道必须有一种方法来确定要使用的正确 View 。

如何让我的代码像在 Google 网站上一样显示房子的正面？

function load_map_and_street_view_from_address(address) {
    // Check if GPS has been locally cached.
    var geocoder = new google.maps.Geocoder();
    geocoder.geocode( { 'address': address }, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {

            var gps = results[0].geometry.location;
            create_map_and_streetview(gps.lat(), gps.lng(), 'map_canvas', 'pano');
        }
    });
}

function  create_map_and_streetview(lat, lng, map_id, street_view_id) {

    var panorama = new google.maps.StreetViewPanorama(document.getElementById(street_view_id));
    var addLatLng = new google.maps.LatLng(lat,lng);
    var service = new google.maps.StreetViewService();
    service.getPanoramaByLocation(addLatLng, 50, function(panoData, status) {
        if (status != google.maps.StreetViewStatus.OK) {
            $('#pano').html('No StreetView Picture Available').attr('style', 'text-align:center;font-weight:bold').show();
            return;
        }
        var angle = google.maps.geometry.spherical.computeHeading(panoData.location.latLng, addLatLng);

        var panoOptions = {
            position: addLatLng,
            addressControl: false,
            linksControl: false,
            panControl: false,
            zoomControlOptions: {
                style: google.maps.ZoomControlStyle.SMALL
            },
            pov: {
                heading: angle,
                pitch: 0,
                zoom: 1
            },
            enableCloseButton: false,
            visible:true
        };

        panorama.setOptions(panoOptions);
    });

    var myOptions = {
        zoom: 14,
        center: addLatLng,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        backgroundColor: 'transparent',
        streetViewControl: false,
        keyboardShortcuts: false
    };
    var map = new google.maps.Map(document.getElementById(map_id), myOptions);
    var marker = new google.maps.Marker({
        map:map,
        animation: google.maps.Animation.DROP,
        position: addLatLng
    });
}

$(document).ready(function() {
    console.log('ready');
    load_map_and_street_view_from_address("2131 S SAN ANTONIO AVE, ONTARIO, CA 91762");
});

https://jsfiddle.net/kennywyland/xm59cbac/

Answer 1

您将全景设置到了错误的位置。您希望它位于房子前面(捕捉到道路，使用方向服务)，但将其指向地理编码器的结果。

updated fiddle

function create_map_and_streetview(addLatLng, panoLatLng, map_id, street_view_id) {

    var panorama = new google.maps.StreetViewPanorama(document.getElementById(street_view_id));
    var service = new google.maps.StreetViewService();
    service.getPanoramaByLocation(panoLatLng, 50, function (panoData, status) {
        if (status != google.maps.StreetViewStatus.OK) {
            $('#pano').html('No StreetView Picture Available').attr('style', 'text-align:center;font-weight:bold').show();
            return;
        }
        var angle = google.maps.geometry.spherical.computeHeading(panoData.location.latLng, addLatLng);
        document.getElementById('angle').innerHTML = angle;
        var panoOptions = {
            position: panoLatLng,
            pov: {
                heading: angle,
                pitch: 0,
                zoom: 1
            },
            enableCloseButton: false,
            visible: true
        };

        panorama.setOptions(panoOptions);
    });

    var myOptions = {
        zoom: 16,
        center: addLatLng,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        backgroundColor: 'transparent',
        streetViewControl: false,
        keyboardShortcuts: false
    };
    var map = new google.maps.Map(document.getElementById(map_id), myOptions);
}

function load_map_and_street_view_from_address(address) {
  // Check if GPS has been locally cached.
  var geocoder = new google.maps.Geocoder();
  var directionsService = new google.maps.DirectionsService();
  geocoder.geocode({
    'address': address
  }, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {

      var gps = results[0].geometry.location;
      // create_map_and_streetview(gps.lat(), gps.lng(), 'map_canvas', 'pano');

      var request = {
        origin: address,
        destination: address,
        travelMode: google.maps.TravelMode.DRIVING
      };
      directionsService.route(request, function(response, status) {
        if (status == google.maps.DirectionsStatus.OK) {
          var cameraLatLng = response.routes[0].legs[0].steps[0].start_location;
          create_map_and_streetview(gps, cameraLatLng, 'map_canvas', 'pano');
        }
      });
    }
  });
}

function create_map_and_streetview(addLatLng, panoLatLng, map_id, street_view_id) {

  var panorama = new google.maps.StreetViewPanorama(document.getElementById(street_view_id));
  var service = new google.maps.StreetViewService();
  service.getPanoramaByLocation(panoLatLng, 50, function(panoData, status) {
    if (status != google.maps.StreetViewStatus.OK) {
      $('#pano').html('No StreetView Picture Available').attr('style', 'text-align:center;font-weight:bold').show();
      return;
    }
    var marker = new google.maps.Marker({
      map: map,
      icon: "https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle_blue.png",
      position: panoData.location.latLng
    });
    var angle = google.maps.geometry.spherical.computeHeading(panoData.location.latLng, addLatLng);
    document.getElementById('angle').innerHTML = angle;
    var panoOptions = {
      position: panoLatLng,
      pov: {
        heading: angle,
        pitch: 0,
        zoom: 1
      },
      enableCloseButton: false,
      visible: true
    };

    panorama.setOptions(panoOptions);
  });

  var myOptions = {
    zoom: 16,
    center: addLatLng,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    backgroundColor: 'transparent',
    streetViewControl: false,
    keyboardShortcuts: false
  };
  var map = new google.maps.Map(document.getElementById(map_id), myOptions);
  var marker = new google.maps.Marker({
    map: map,
    animation: google.maps.Animation.DROP,
    icon: "https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle.png",
    position: addLatLng
  });
}

$(document).ready(function() {
  console.log('ready');
  load_map_and_street_view_from_address("2131 S SAN ANTONIO AVE, ONTARIO, CA 91762");
});

<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?ext=.js"></script>
<div id="angle"></div>
<div id="map_canvas" style="width: 400px; height: 400px; border: 1px solid orange; display: inline-block;"></div>
<div id="pano" style="width: 400px; height: 400px; border: 1px solid green; display: inline-block;"></div>