带有折线的一页上的多个 Google 地图

Question

我已经设法构建了一个函数，它构建了 4 个地图，它们都共享相同的中心坐标，并且有一个 LngLat 值数组来绘制折线。

对于这个演示，我遇到的问题是我无法在 4 个地图上应用折线数组，它会自动将它们应用到地图的最后一个实例。

HTML 段

<span id="mapPlaceholder" style="height:150px; width: 100%;"></span>
<span id="mapPlaceholder_2" style="height:150px; width: 100%;"></span>
<span id="mapPlaceholder_3" style="height:150px; width: 100%;"></span>
<span id="mapPlaceholder_4" style="height:150px; width: 100%;"></span>

Javascipt 段

    function initialize() {
  var mapOptions = {
    zoom: 13,
    center: new google.maps.LatLng(54.4488017, -3.0171732),
    mapTypeId:google.maps.MapTypeId.ROADMAP,
    zoomControl: false,
    streetViewControl: false,
    mapTypeControl: false,
    draggable: false
  };

  var map = new google.maps.Map(document.getElementById('mapPlaceholder'),
      mapOptions);

  var map = new google.maps.Map(document.getElementById('mapPlaceholder_2'),
      mapOptions);

  var map = new google.maps.Map(document.getElementById('mapPlaceholder_3'),
      mapOptions);

  var map = new google.maps.Map(document.getElementById('mapPlaceholder_4'),
      mapOptions);

  var flightPlanCoordinates = [
    new google.maps.LatLng(54.455004, -3.029325),
    new google.maps.LatLng(54.454587, -3.028024),
    new google.maps.LatLng(54.453911, -3.027952),
    new google.maps.LatLng(54.453537, -3.028260),
    new google.maps.LatLng(54.453645, -3.027656),
    new google.maps.LatLng(54.453414, -3.026795),
    new google.maps.LatLng(54.453272, -3.026101),
    new google.maps.LatLng(54.453503, -3.025109),
    new google.maps.LatLng(54.453171, -3.022341),
    new google.maps.LatLng(54.452607, -3.020664),
    new google.maps.LatLng(54.452233, -3.017000),
    new google.maps.LatLng(54.449940, -3.015895),
    new google.maps.LatLng(54.447637, -3.015378),
    new google.maps.LatLng(54.445568, -3.014790),
    new google.maps.LatLng(54.444773, -3.013814),
    new google.maps.LatLng(54.443881, -3.015693),
    new google.maps.LatLng(54.444737, -3.019457),
    new google.maps.LatLng(54.446439, -3.021170),
    new google.maps.LatLng(54.448048, -3.024403),
    new google.maps.LatLng(54.449299, -3.027044),
    new google.maps.LatLng(54.450360, -3.029291),
    new google.maps.LatLng(54.452475, -3.030792),
    new google.maps.LatLng(54.453217, -3.029111),
    new google.maps.LatLng(54.454128, -3.029341),
    new google.maps.LatLng(54.455004, -3.029325)
  ];

  var flightPath = new google.maps.Polyline({
    path: flightPlanCoordinates,
    geodesic: true,
    strokeColor: '#FF0000',
    strokeOpacity: 1.0,
    strokeWeight: 2
  });

  flightPath.setMap(map);
}

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

Answer 1

您需要有 4 个唯一的地图变量和 4 个唯一的 google.maps.Polyline 对象，在每个地图上设置一个（一条折线只有一个地图属性，因此只能在一个地图上）。

working fiddle

代码sn-p：

function initialize() {
  var mapOptions = {
    zoom: 13,
    center: new google.maps.LatLng(54.4488017, -3.0171732),
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    zoomControl: false,
    streetViewControl: false,
    mapTypeControl: false,
    draggable: false
  };

  var map = new google.maps.Map(document.getElementById('mapPlaceholder'),
    mapOptions);

  var map2 = new google.maps.Map(document.getElementById('mapPlaceholder_2'),
    mapOptions);

  var map3 = new google.maps.Map(document.getElementById('mapPlaceholder_3'),
    mapOptions);

  var map4 = new google.maps.Map(document.getElementById('mapPlaceholder_4'),
    mapOptions);

  var flightPlanCoordinates = [
    new google.maps.LatLng(54.455004, -3.029325),
    new google.maps.LatLng(54.454587, -3.028024),
    new google.maps.LatLng(54.453911, -3.027952),
    new google.maps.LatLng(54.453537, -3.028260),
    new google.maps.LatLng(54.453645, -3.027656),
    new google.maps.LatLng(54.453414, -3.026795),
    new google.maps.LatLng(54.453272, -3.026101),
    new google.maps.LatLng(54.453503, -3.025109),
    new google.maps.LatLng(54.453171, -3.022341),
    new google.maps.LatLng(54.452607, -3.020664),
    new google.maps.LatLng(54.452233, -3.017000),
    new google.maps.LatLng(54.449940, -3.015895),
    new google.maps.LatLng(54.447637, -3.015378),
    new google.maps.LatLng(54.445568, -3.014790),
    new google.maps.LatLng(54.444773, -3.013814),
    new google.maps.LatLng(54.443881, -3.015693),
    new google.maps.LatLng(54.444737, -3.019457),
    new google.maps.LatLng(54.446439, -3.021170),
    new google.maps.LatLng(54.448048, -3.024403),
    new google.maps.LatLng(54.449299, -3.027044),
    new google.maps.LatLng(54.450360, -3.029291),
    new google.maps.LatLng(54.452475, -3.030792),
    new google.maps.LatLng(54.453217, -3.029111),
    new google.maps.LatLng(54.454128, -3.029341),
    new google.maps.LatLng(54.455004, -3.029325)
  ];

  var flightPath = new google.maps.Polyline({
    path: flightPlanCoordinates,
    geodesic: true,
    strokeColor: '#FF0000',
    strokeOpacity: 1.0,
    strokeWeight: 2
  });

  flightPath.setMap(map);
  var flightPath2 = new google.maps.Polyline({
    map: map2,
    path: flightPlanCoordinates,
    geodesic: true,
    strokeColor: '#FF0000',
    strokeOpacity: 1.0,
    strokeWeight: 2
  });
  var flightPath3 = new google.maps.Polyline({
    map: map3,
    path: flightPlanCoordinates,
    geodesic: true,
    strokeColor: '#FF0000',
    strokeOpacity: 1.0,
    strokeWeight: 2
  });
  var flightPath4 = new google.maps.Polyline({
    map: map4,
    path: flightPlanCoordinates,
    geodesic: true,
    strokeColor: '#FF0000',
    strokeOpacity: 1.0,
    strokeWeight: 2
  });


}

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

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="mapPlaceholder" style="height:150px; width: 100%;"></div>

<div id="mapPlaceholder_2" style="height:150px; width: 100%;"></div>

<div id="mapPlaceholder_3" style="height:150px; width: 100%;"></div>

<div id="mapPlaceholder_4" style="height:150px; width: 100%;"></div>