将街景放置在主要街道而不是后街

Question

以下代码将相机放置在最靠近标记的道路上，但它是一条后街，对导航毫无用处。

有没有办法将相机放置在最近的主要街道（在本例中为“Eastern Ave”）而不改变标记的位置，而不是检查以编程方式选择最近的主要街道而不是任何最近的街道。

var panorama, myPlace;

function initialize() {

    myPlace = {
        lat: 33.976827,
        lng: -118.163889
    };

    var map = new google.maps.Map(document.getElementById('map'), {
        center: myPlace,
        zoom: 18
    });

    panorama = new google.maps.StreetViewPanorama(document.getElementById('pano'), {
        position: myPlace
    });

    var marker = new google.maps.Marker({
        position: myPlace,
        map: map
    });

    map.setStreetView(panorama);

    var sv = new google.maps.StreetViewService();

    sv.getPanorama({
        location: myPlace,
        radius: 50
    }, processSVData);
}

function processSVData(data, status) {

    if (status === google.maps.StreetViewStatus.OK) {

        var marker_pano = new google.maps.Marker({
            position: myPlace,
            map: panorama
        });

        var heading = google.maps.geometry.spherical.computeHeading(data.location.latLng, marker_pano.getPosition());

        panorama.setPov({
            heading: heading,
            pitch: 0
        });
    }
}

google.maps.event.addDomListener(window, 'load', initialize);

http://jsfiddle.net/0LdqLzt6/

Answer 1

使用来自Request main road / curbside StreetView panoramas instead of back alleys from API 的答案和您的地址（为了获得地址，我对您的坐标进行了反向地理编码，然后进行了调整，因为它似乎想指向隔壁的建筑物）。

var sv = new google.maps.StreetViewService();
var geocoder = new google.maps.Geocoder();
var directionsService = new google.maps.DirectionsService();
var panorama;
var address = "6327 Eastern Avenue, Bell, CA 90201, USA";
var myLatLng;

function initialize() {
  myPlace = {
    lat: 33.976827,
    lng: -118.163889
  };
  var map = new google.maps.Map(document.getElementById('map'), {
    center: myPlace,
    zoom: 18
  });
  var marker = new google.maps.Marker({
    position: myPlace,
    map: map
  });
  panorama = new google.maps.StreetViewPanorama(document.getElementById("pano"));
  map.setStreetView(panorama);
  geocoder.geocode({
    'address': address
  }, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      myLatLng = results[0].geometry.location;

      // find a Streetview location on the road
      var request = {
        origin: address,
        destination: address,
        travelMode: google.maps.DirectionsTravelMode.DRIVING
      };
      directionsService.route(request, directionsCallback);
    } else {
      alert("Geocode was not successful for the following reason: " + status);
    }
  });
}
google.maps.event.addDomListener(window, 'load', initialize);

function processSVData(data, status) {
  if (status == google.maps.StreetViewStatus.OK) {

    panorama.setPano(data.location.pano);

    var heading = google.maps.geometry.spherical.computeHeading(data.location.latLng, myLatLng);
    panorama.setPov({
      heading: heading,
      pitch: 0,
      zoom: 1
    });
    panorama.setVisible(true);

  } else {
    alert("Street View data not found for this location.");
  }
}

function directionsCallback(response, status) {
  if (status == google.maps.DirectionsStatus.OK) {
    var latlng = response.routes[0].legs[0].start_location;
    sv.getPanoramaByLocation(latlng, 50, processSVData);
  } else {
    alert("Directions service not successfull for the following reason:" + status);
  }
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#map,
#pano {
  width: 100%;
  height: 50%;
}

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry"></script>
<div id="map"></div>
<div id="pano"></div>