Question

因此，我注意到google.com/maps提供了与使用地理定位器组合的Streetview API不同的StreetView。

为了向您展示示例，我们将使用以下地址：

2510 Cherry Valley Blvd Dallas，TX 75241

获取此地址的坐标时，我使用以下地理编码api：

http://maps.google.com/maps/api/geocode/json?address=2510+Cherry+Valley+Blvd+Dallas,+TX+75241
返回以下位置：
{lat：32.6432887，lng：-96.7823027}

然后我在Google Streetview API中使用这些坐标。

但是，当我访问google.com/maps时，请输入相同的地址并转到街景，最后会有稍微不同的坐标，这些坐标更能代表商家地址的正面。在这种情况下，它使用的坐标如下：

{lat：32.6439611，lng：-96.7825014}
https://www.google.com/maps

以下是两张图片（首先是Google Maps API的结果，第二个结果是使用google.com/maps。

如何确保使用Google Maps API在我的页面上返回的视图与google.com/maps上的视图完全相同？

我的客户需要这个。有关如何调整geolocator API或Google Maps API的任何想法都将不胜感激。

我的Google Maps API会返回以下图片（出于某种原因，该视图位于adjecent街道上，因此稍有不正确）：

Google.com/maps会返回以下图片（地址为2519 Cherry Valley，即使我搜索了2510 Cherry Valley）。谷歌api似乎调整地理位置以获得更准确的观点。

Answer 1

一个选项是使用DirectionsService来捕捉街景视图，它会返回您要开车去的地方。

proof of concept fiddle

代码段

var map;
var sv = new google.maps.StreetViewService();
var geocoder = new google.maps.Geocoder();
var directionsService = new google.maps.DirectionsService();
var panorama;
var address;

function initialize() {
  panorama = new google.maps.StreetViewPanorama(document.getElementById("pano"));
  myLatLng = new google.maps.LatLng(37.422104808, -122.0838851);
  var myOptions = {
    zoom: 15,
    streetViewControl: false
  };

  map = new google.maps.Map(document.getElementById('map_canvas'),
    myOptions);

  address = "2510 Cherry Valley Blvd Dallas, TX 75241";
  geocoder.geocode({
    'address': address
  }, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      myLatLng = results[0].geometry.location;

      var marker = new google.maps.Marker({
        position: myLatLng,
        map: map
      });
      map.setCenter(myLatLng);
      // 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);
    }
  });

  sv.getPanoramaByLocation(myLatLng, 50, processSVData);

  // getPanoramaByLocation will return the nearest pano when the
  // given radius is 50 meters or less.
  google.maps.event.addListener(map, 'click', function(event) {
    sv.getPanoramaByLocation(event.latLng, 50, processSVData);
  });
}

function processSVData(data, status) {
  if (status == google.maps.StreetViewStatus.OK) {
    var marker = new google.maps.Marker({
      position: data.location.latLng,
      draggable: true,
      map: map,
      title: data.location.description
    });

    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);

    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: 270,
        pitch: 0,
        zoom: 1
      });
      panorama.setVisible(true);
    });
  } else {
    alert("Street View data not found for this location.");
  }
}

function geocoderCallback(results, status) {
  if (status == google.maps.GeocoderStatus.OK) {
    var latlng = results[0].geometry.location;
    map.setCenter(latlng);
    sv.getPanoramaByLocation(latlng, 50, processSVData);

  } else {
    alert("Geocode was not successful for the following reason: " + status);
  }
};

function directionsCallback(response, status) {
  if (status == google.maps.DirectionsStatus.OK) {
    var latlng = response.routes[0].legs[0].start_location;
    map.setCenter(latlng);
    sv.getPanoramaByLocation(latlng, 50, processSVData);
  } else {
    alert("Directions service not successfull for the following reason:" + status);
  }
}
google.maps.event.addDomListener(window, "load", initialize);

html,
body {
  width: 100%;
}

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry"></script>
<div id="pano" style="width: 100%; height: 400px;"></div>
<div id="map_canvas" style="width: 100%; height: 400px;"></div>

Google Streetview API返回的视图与google.com/maps不同。任何解决方法？

1 个答案: