一个JS文件中包含多个Google Maps

Question

我正在寻找一种方法，可以将多个Google地图（街景视图）包含到我网站的不同部分中，每个地图具有不同的纬度/经度。

目前，我可以在js文件中使用一张地图，但不知道如何添加第二张和第三张地图，这些地图可以使用自己的ID调用到另一个div中。 以下是我的一张地图的代码，如何包含其他具有相同设置的地图？

谢谢！

var     pano;
var     latlng = new google.maps.LatLng(34.067722,-118.28681);

var panoOptions = {
    position: latlng,
        pov: {
          heading: 18.669,
          pitch: 20.072,
          zoom: 0,
        },
        addressControl:false,
        linksControl: false,
        panControl: false,
        zoomControl: false,
        enableCloseButton: false,
        fullScreenControlOptions: false
    };

pano = new google.maps.StreetViewPanorama(
    document.getElementById('streetViewIndex'), 
    panoOptions);

window.setInterval(function() {
    var pov = pano.getPov();
    pov.heading += 0.2;
    pano.setPov(pov);
}, 10);

Answer 1

一种可能的解决方案：使用类来指示要显示的元素； 和一组坐标。

代码段：

 jQuery(document).ready(function($) { function initialize() { var points = [ new google.maps.LatLng(29.5524337, -95.0945819), // 1st div with class="streetview" new google.maps.LatLng(48.85837, 2.2944813), // 2nd div with class="streetview" new google.maps.LatLng(40.6892494, -74.0445) ]; var panoramaOptions = { pov: { heading: 0, pitch: 0, zoom: -1, }, addressControl: false, linksControl: false, panControl: false, zoomControl: false, enableCloseButton: false, fullScreenControlOptions: false }; var mapdivs = document.getElementsByClassName('streetView'); for (var i = 0; i < mapdivs.length; i++) { panoramaOptions.position = points[i]; var panorama = new google.maps.StreetViewPanorama(mapdivs[i], panoramaOptions); } } google.maps.event.addDomListener(window, 'load', initialize); }); 

 .streetView { height: 200px; width: 400px; margin: 0px; padding: 0px } 

 <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="streetView"></div> <div class="streetView"></div> <div class="streetView"></div>