Question

我正在尝试在同一页面上嵌入两个Google街景控件，它看起来应该是这样的：

How the end result should look like

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

Answer 1

多个（3）streetView panoramas

的示例

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

代码段

＆＃13;

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);

＆＃13;

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

＆＃13;

<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>

＆＃13;

同一页面上有多个Google街景视图

1 个答案: