同一页面上的多个 Google 街景

Question

我正在尝试在同一页面上嵌入两个 Google 街景视图控件，它应该如下所示：

我希望访问者使用这两个元素上的控件通过鼠标在该区域中导航。这可能在同一个 HTML 页面上吗？

Answer 1

（取自各种 examples in the documentation，使用（但并不真正需要）JQuery。

代码片段：

function initPano() {
  var panoramas = [];
  panoDivs = document.getElementsByClassName('pano');
  $(".pano").each(function(idx, el) {
    console.log("idx=" + idx + " lat:" + parseFloat($(this).data("lat")) + " lng:" + parseFloat($(this).data("lng")) + " heading:" + parseFloat($(this).data("heading")));
    var panorama = new google.maps.StreetViewPanorama(
      el, {
        position: {
          lat: parseFloat($(this).data("lat")),
          lng: parseFloat($(this).data("lng"))
        },
        pov: {
          heading: parseFloat($(this).data("heading")),
          pitch: 0
        },
        visible: true
      });
    panoramas.push(panorama);
  });

}
google.maps.event.addDomListener(window, "load", initPano);

html,
body {
  margin: 0;
  padding: 0;
}
.pano {
  height: 200px;
  width: 200px;
  margin: 2px;
  padding: 2px;
}
.col {
  height: 200px;
  width: 620px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div class="col">
  <div style="float:left" class="pano" data-lat="42.345573" data-lng="-71.098326" data-heading="34"></div>
  <div style="float:right" class="pano" data-lat="40.729884" data-lng="-73.990988" data-heading="265"></div>
  <div class="pano" data-lat="37.869260" data-lng="-122.254811" data-heading="165"></div>
</div>

同一页面上的多个 Google 街景

Multiple Google Street Views on the same page

google-maps

google-street-view