使用多段線創建多個地圖對象

想知道我在做什麼錯了，我想創建多個地圖對象，並使用它們自己的基於編碼的latlng的多段線，我可以使用一個地圖來工作，但無法正確與多個。使用多段線創建多個地圖對象

var outerDiv = document.getElementById('myOuterDiv'); 
var encodedlatlngs = ["ah|qIe{[email protected]", "yy`rIg}[email protected]}MpnBeK{cY`bKa{@", "ah|qIe{[email protected]"]; 

    function initialize() { 
     for(i = 0; i < encodedlatlngs.length; i++){    
      var myMap = document.createElement('div'); 
       myMap.className = 'map' + i; 
       myMap.setAttribute("height", "200"); 
       myMap.setAttribute("width", "400"); 
       initMap(encodedlatlngs[i], myMap.className); 
       outerDiv.appendChild(myMap); 
       });   
      } 




    google.maps.event.addDomListener(window, "load", initialize); 
    function initMap(encoded_latlngs,mapID) { 

    map = new google.maps.Map(document.getElementById(mapID), { 
       zoom: 10, 
       center: {lat: 55.570, lng: 9.000}, 
       mapTypeId: google.maps.MapTypeId.TERRAIN 
      }); 

      var decode2 = google.maps.geometry.encoding.decodePath(encoded_latlngs); 

      // Construct the polyline. 
      var polyline = new google.maps.Polyline({ 
       path: decode2, 
       strokeColor: '#036eff', 
       strokeOpacity: 0.8, 
       strokeWeight: 3, 
       fillOpacity: 0.35 
      }); 

      polyline.setMap(map); 
      infoWindow = new google.maps.InfoWindow; 
      }

來源

2016-06-29 Rasmus Rajje Josefsson

你有多個地圖有什麼問題？你能提供一個[最小，完整，測試和可讀的例子]（http://stackoverflow.com/help/mcve）來證明這個問題嗎？ – geocodezip

[它適用於我2個地圖]（http://jsfiddle.net/geocodezip/0eygk545/） – geocodezip

感謝您的回答，但我需要更多關於創建這些div與地圖的循環的幫助。因爲div的數量將基於用戶保存的行程。所以我的問題是使用循環創建地圖div，因爲暫時不會創建任何地圖。 https://jsfiddle.net/Lw8mtksb/ –

您正試圖檢索參考使用id =「outerDiv」的DIV之前，它是存在於DOM。
for循環後面有一個語法錯誤（額外的「）」）。
在渲染地圖之前，您需要將myMap div附加到DOM。
你需要地圖的ID傳遞給你的initMap功能（document.getElementById僅適用於身份證，沒有類名）。
你需要設置元素的大小：

myMap.setAttribute("style", "height: 200px; width: 400px;");

proof of concept fiddle

代碼片段：

var encodedlatlngs = ["ah|qIe{[email protected]", "yy`rIg}[email protected]}MpnBeK{cY`bKa{@", "ah|qIe{[email protected]"]; 
 

 
function initialize() { 
 
    var outerDiv = document.getElementById('myOuterDiv'); 
 
    for (i = 0; i < encodedlatlngs.length; i++) { 
 
    var myMap = document.createElement('div'); 
 
    myMap.id = 'map' + i; 
 
    myMap.setAttribute("style", "height: 200px; width: 400px;"); 
 
    outerDiv.appendChild(myMap); 
 
    initMap(encodedlatlngs[i], myMap.id); 
 
    }; 
 
} 
 

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

 
function initMap(encoded_latlngs, mapID) { 
 

 
    map = new google.maps.Map(document.getElementById(mapID), { 
 
    zoom: 10, 
 
    center: { 
 
     lat: 55.570, 
 
     lng: 9.000 
 
    }, 
 
    mapTypeId: google.maps.MapTypeId.TERRAIN 
 
    }); 
 

 
    var decode2 = google.maps.geometry.encoding.decodePath(encoded_latlngs); 
 

 
    // Construct the polyline. 
 
    var polyline = new google.maps.Polyline({ 
 
    path: decode2, 
 
    strokeColor: '#036eff', 
 
    strokeOpacity: 0.8, 
 
    strokeWeight: 3, 
 
    fillOpacity: 0.35 
 
    }); 
 

 
    polyline.setMap(map); 
 
    infoWindow = new google.maps.InfoWindow; 
 
}

html, 
 
body { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px; 
 
}

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry"></script> 
 
<div id="myOuterDiv"></div>

來源

2016-06-30 13:07:45 geocodezip

阿哈ops這是與id我錯過了，謝謝！ –

使用多段線創建多個地圖對象

回答

相關問題