Как получить ТОЧКУ ЗРЕНИЯ конкретного места с помощью Google Maps - PullRequest
Новая
       22

Как получить ТОЧКУ ЗРЕНИЯ конкретного места с помощью Google Maps

0 голосов
/ 24 апреля 2019

Я хочу использовать автозаполнение мест Google - для каждого сеанса с включенными сведениями о месте, а когда пользователь нажимает на элемент, отображать Google Map StreetView с указанием места.

Я пытался сделать так: когда пользователь нажимает на список автозаполнения, я использую функцию getPlace() для получения geometry.coordinates (широта и долгота) и инициализирую Google Map Street View с этой информацией.

Проблема в том, что это случайная точка обзора Google Map Street View.

Знаете, как я могу это решить? Я думаю, что не могу получить эту информацию с подробностями места. Есть ли другой способ?

Спасибо!

1 Ответ

1 голос
/ 24 апреля 2019

Из API мест можно получить координаты места.

Пример: Посольство Бельгии, Париж Возвращение 48.87501200000001, 2.2944579999999632

Теперь используйте эти координаты, чтобы получить просмотр улиц:

enter image description here

Очевидно, это не показывает Посольство Бельгии .

Когда служба Panorama возвращает данные, вы можете получить ее реальные координаты, в данном случае 48.87519271414293, 2.294281201461672, которые, как вы можете видеть, не совсем совпадают с координатами места.

Используя библиотеку геометрии, вы можете вычислить курс между координатами панорамы и координатами вашего места.

let heading = google.maps.geometry.spherical.computeHeading(StreetViewCoords, PlaceCoords);

Это даст вам направление.

Теперь, прежде чем показывать панораму, установите ее заголовок: 

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

Street View теперь направляется в посольство Бельгии:

enter image description here

Подтверждение концепции ниже: 

var map;
var panorama;
var panoramaService;
var streetView;
var placeCoords;

function initialize() {

  placeCoords = new google.maps.LatLng(48.87501200000001, 2.2944579999999632);

  map = new google.maps.Map(
    document.getElementById("map-canvas"), {
      zoom: 5,
      center: placeCoords,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

  panoramaService = new google.maps.StreetViewService();

  var panoramaOptions = {
    disableDefaultUI: true
  };

  panorama = new google.maps.StreetViewPanorama(document.getElementById("pano"), panoramaOptions);

  map.setStreetView(panorama);

  streetView = map.getStreetView();
  runPanoramaService();
}

function runPanoramaService() {
  panoramaService.getPanoramaByLocation(placeCoords,
    100,

    function(streetViewPanoramaData, streetViewStatus) {
      if (streetViewStatus == "OK") {

        let heading = google.maps.geometry.spherical.computeHeading(streetViewPanoramaData.location.latLng, placeCoords);

        streetView.setPosition(streetViewPanoramaData.location.latLng);

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

        streetView.setVisible(true);
      }
    });
}

initialize();
#map-canvas {
  height: 80px;
}

#pano {
  height: 160px;
}
<div id="map-canvas"></div>
<div id="pano"></div>

<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=geometry&callback=initialize">
</script>
...