如何使用谷歌地图获取特定地点的观点

Question

我想使用Google商家信息自动填充功能 - 每个会话，包含广告详细信息，当用户点击某个商品时，会显示带有商家信息的Google地图街景视图。

我试图做的方式是：当用户点击自动完成列表时，我使用getPlace()函数获取geometry.coordinates（lat和long），并使用该信息初始化Google Map街景视图。

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

你知道我怎么解决它？我想我无法通过地方详情获取这些信息。还有其他方法吗？

谢谢！

Answer 1

在Places API中，获取位置坐标。

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

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

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

在Panorama Service返回数据时，您可以获得其真实坐标，在这种情况下，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>