使用折线创建多个地图对象

Question

想知道我做错了什么，我想创建多个地图对象，它们基于编码的 latlng 具有自己的多段线，我让它在一张地图上工作，但不能在多张地图上正确处理。

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

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

Answer 1

您正试图在 DOM.
for 循环后有一个语法错误（一个额外的“）”。
在渲染地图之前，您需要将 myMap div 附加到 DOM。
您需要将地图的 id 传递给您的 initMap 函数（document.getElementById 仅适用于 id，不适用于 classNames）。
您需要设置元素的大小：

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

proof of concept fiddle

代码片段：

var encodedlatlngs = ["ah|qIe{ow@wHagSvuIwfF", "yy`rIg}uu@v}MpnBeK{cY`bKa{@", "ah|qIe{ow@wHagSvuIwfF"];

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>

使用折线创建多个地图对象

Create Multiple Maps object with polylines

javascript

google-maps

google-polyline