google-maps - 如何使用谷歌地图获得特定地点的观点

Question

我想使用 Google Places Autocomplete - Per Session，包括 Place Details，当用户点击一个项目时，显示一个带有 Place 的 Google Map StreetView。

我尝试做的方式是：当用户点击自动完成列表时，我使用getPlace()获取geometry.coordinates（纬度和经度）功能，并使用该信息初始化谷歌地图街景。

问题是谷歌地图街景的起点是随机的。

你知道我该如何解决吗？我想我无法通过 Place Details 获得该信息。还有其他方法吗？

谢谢！

标签： google-mapsgoogle-placesgoogle-street-view

Answer 1

从 Places API 获取地点坐标。

示例：比利时大使馆，巴黎返回48.87501200000001, 2.2944579999999632

现在使用这些坐标来获取街景：

显然，它没有显示比利时大使馆。

在全景服务返回数据时，您可以获得它的真实坐标，在这种情况下48.87519271414293, 2.294281201461672，您可以看到它与地点坐标并不完全相同。

使用几何库，您可以计算全景坐标和您的位置坐标之间的航向。

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

这会给你一个标题。

现在在显示全景图之前，设置它的标题：

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

街景现在前往比利时大使馆：

下面的概念证明：

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>