Google Streetview API возвращает другой вид, нежели google.com/maps. Любой обходной путь?

Итак, я заметил, что google.com/maps предоставляет другой StreetView, чем мой Streetview API, с комбинацией геолокатора.

Чтобы показать вам пример, мы будем использовать следующий адрес:

  • 2510 Cherry Valley Blvd Dallas, TX 75241

При получении координат этого адреса я использую следующий api геокода:

Затем я использую эти координаты в моем API просмотра улиц Google.

Однако, когда я захожу на google.com/maps, ввожу тот же адрес и перехожу к просмотру улиц, координаты немного отличаются, что лучше отражает лицевую сторону служебного адреса. В этом случае используются следующие координаты:

Ниже представлены два изображения (первое - с помощью Google Maps API, а второе - с google.com/maps.

Как убедиться, что представление, возвращаемое на моей странице с помощью API Карт Google, точно такое же, как и на google.com/maps?

Моему клиенту это нужно. Мы будем очень благодарны за любые идеи о том, как настроить API геолокатора или Google Maps API.

My Google Maps API возвращает следующее изображение (по какой-то причине вид находится на соседней улице, и в результате он немного неправильный): введите описание изображения здесь

Google.com/maps возвращает следующее изображение (по адресу 2519 Cherry Valley, хотя я искал 2510 Cherry Valley). Google api, похоже, настраивает геолокацию для более точного просмотра.

введите здесь описание изображения


person andre    schedule 13.03.2017    source источник
comment
связанный вопрос: Почему некоторые изображения улиц из неправильный угол? скрипка в моем ответе, похоже, не работает для этого адреса, но на моем сайте есть   -  person geocodezip    schedule 14.03.2017


Ответы (1)


Один из вариантов - сделать снимок улицы с помощью службы DirectionsService, которая возвращает место, в которое вы бы поехали.

проверка концепции

фрагмент кода:

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>

person geocodezip    schedule 13.03.2017
comment
спасибо @geocodezip! это очень полезно! Я не мог найти другой вопрос ТАК, пока вы не указали на него. это устранило мою проблему! - person andre; 14.03.2017