Question

我想在同一页面上生成多个谷歌地图，每个地图都显示不同目的地的路线。这是我的代码：

var container = document.getElementById("container");

function initMap() {

    for(var i=0;i<5;i++ ){

        container.innerHTML += '<div class="mapSize" id="map' + i + '"></div>';

        var directionsDisplay  = new google.maps.DirectionsRenderer;
        var directionsService = new google.maps.DirectionsService;

        var map = new google.maps.Map(document.getElementById('map'+ i), {
            zoom: 11,
            center: {lat:-20.239340, lng:57.574604 }
        });

        directionsDisplay.setMap(map);

        var start = 'Albion, Mauritius';
        var end = 'Grand Port District, Mauritius';

        directionsService.route({
            origin: start,
            destination: end,
            travelMode: 'DRIVING'
        }, function(response, status) {
            if (status === 'OK') {
                directionsDisplay.setDirections(response);
            } else {
                window.alert('Directions request failed due to ' + status);
            }
        });

    }
}

问题是地图只显示在最后一个div中，我在＆＃34; directionsDisplay.setDirections（响应）中收到警告;＆＃34; line：可从闭包访问可变变量。请帮帮我

Answer 1

发布的代码有几个问题。主要问题是DirectionsService的异步性质。您需要为每个地图分配DirectionsService / DirectionsRenderer。一种方法是将代码放在函数中创建地图和方向，并使用函数闭包。

function makeMap(mapEl, start, end) {
  var directionsDisplay = new google.maps.DirectionsRenderer;
  var directionsService = new google.maps.DirectionsService;
  var map = new google.maps.Map(mapEl, {
    zoom: 11,
    center: {
      lat: -20.239340,
      lng: 57.574604
    }
  });
  directionsDisplay.setMap(map);
  directionsService.route({
    origin: start,
    destination: end,
    travelMode: 'DRIVING'
  }, function(response, status) {
    if (status === 'OK') {
      directionsDisplay.setDirections(response);
    } else {
      window.alert('Directions request failed due to ' + status);
    }
  });
}

proof of concept fiddle

代码段

＆＃13;

function initMap() {
  var container = document.getElementById("container");
  var maps = [];
  var directionsDisplays = [];
  var start = 'Albion, Mauritius';
  var end = ['Grand Port District, Mauritius', "Port Lous, Mauritius", "Medine Camp de Masque, Mauritius", "Poste Lafayette, Mauritius", "Souillac, Mauritius"];
  for (var i = 0; i < 5; i++) {
    // container.innerHTML += '<div class="mapSize" id="map' + i + '"></div>';
    var elem = document.createElement("div");
    elem.setAttribute("class", "mapSize");
    elem.setAttribute("id", "map" + i);
    container.appendChild(elem);
    makeMap(elem, start, end[i]);
  }
}
google.maps.event.addDomListener(window, "load", initMap);

function makeMap(mapEl, start, end) {
  var directionsDisplay = new google.maps.DirectionsRenderer;
  var directionsService = new google.maps.DirectionsService;
  var map = new google.maps.Map(mapEl, {
    zoom: 11,
    center: {
      lat: -20.239340,
      lng: 57.574604
    }
  });
  directionsDisplay.setMap(map);
  directionsService.route({
    origin: start,
    destination: end,
    travelMode: 'DRIVING'
  }, function(response, status) {
    if (status === 'OK') {
      directionsDisplay.setDirections(response);
    } else {
      window.alert('Directions request failed due to ' + status);
    }
  });
}

＆＃13;

html,
body,
#container {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
.mapSize {
  height: 400px;
  width: 400px;
}
}

＆＃13;

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="container"></div>

＆＃13;

在同一页面上生成多个谷歌地图

1 个答案: