多個谷歌地圖在一個JS文件

我正在尋找一種方法來包括多個谷歌地圖（街景），每個都有不同的經度/緯度到我的網站的不同部分。多個谷歌地圖在一個JS文件

目前我可以在我的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);

來源

2016-01-27 RJM

什麼其他位置？什麼是HTML div的元素ID？您是否嘗試過複製使用不同位置/ div ID呈現網頁上的街景視圖的代碼？當你這樣做時遇到了什麼麻煩？ – geocodezip

@geocodezip。其他位置將是我從Google街景視圖中選擇的位置，它們將具有單獨的經度和緯度。例如，另一個元素ID就像「streetViewPhoenix」。這將與「streetViewIndex」在同一頁面上。我曾嘗試複製所有代碼，但它只是讓第一張地圖不再在全景中旋轉，第二張地圖完全變灰，並且不顯示任何東西。任何建議將不勝感激。謝謝！ – RJM

一個可能的解決方案：使用一個類來指示要顯示的元素;和一個座標數組。

代碼片段：

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>

來源

2016-02-11 14:36:32 geocodezip

多個谷歌地圖在一個JS文件

回答

相關問題