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 Segment

    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

代码段：

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>

使用折线在一个页面上显示多个Google地图

1 个答案: