Question

不知道我做错了什么，我想要创建多个地图对象，使用基于编码latlng的自己的折线，我可以使用一个地图，但无法使用多个地图。

Message

Answer 1

您正试图在DOM中存在id =“outerDiv”的div之前检索对它的引用。
在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>

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

1 个答案: