使用Google Maps JavaScript API V3在同一网页上显示两个带有路线的地图

Question

我正在尝试使用Google Maps JavaScript API在同一网页上显示两张带有路线的地图，但只有其中一张地图加载了显示的路线。

<div id = "car_map" style = "width:400px; height:450px;"></div>
<div id = "bus_map" style = "width:400px; height:450px;"></div>

<script  type="text/javascript" >
  var directionsService = new google.maps.DirectionsService();
  var directionsDisplay = new google.maps.DirectionsRenderer();

  var map = new google.maps.Map(document.getElementById('car_map'), {
    zoom:7,
    center: {lat: <%= @origin[0]%>, lng: <%= @origin[1]%>}, 
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  var map2 = new google.maps.Map(document.getElementById('bus_map'), {
    zoom:7,
    center: {lat: <%= @origin[0]%>, lng: <%= @origin[1]%>},
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  directionsDisplay.setMap(map);
  directionsDisplay.setMap(map2);

  var carRequest = {
    origin: {lat: <%= @origin[0]%>, lng: <%= @origin[1]%>}, 
    destination: {lat: <%=@destination[0]%>, lng: <%=@destination[1]%>},
    travelMode: google.maps.DirectionsTravelMode.DRIVING
  };

  var busRequest = {
    origin: {lat: <%= @origin[0]%>, lng: <%= @origin[1]%>}, 
    destination: {lat: <%=@destination[0]%>, lng: <%=@destination[1]%>},
    travelMode: google.maps.DirectionsTravelMode.TRANSIT
  };

  directionsService.route(carRequest, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
    }
  });

  directionsService.route(busRequest, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
    }
  });

</script>

我注意到如果我改变以下行的顺序：

directionsDisplay.setMap(map2);
directionsDisplay.setMap(map);

现在地图将显示方向，map2将是以指定坐标为中心但没有方向的地图。我在网上看到你必须为每张地图都有唯一的DirectionsRenderer，但我尝试创建其他变量并在不同的地图上调用它们，但这也没有用。事实上，当我将变量名称从var directionsDisplay更改为var directionsDisplay2时，它根本不起作用。下面是添加了这些变量的代码：

<div id = "car_map" style = "width:400px; height:450px;"></div>
<div id = "bus_map" style = "width:400px; height:450px;"></div>

<script  type="text/javascript" >
  var directionsService = new google.maps.DirectionsService();
  var directionsDisplay = new google.maps.DirectionsRenderer();
  var directionsService2 = new google.maps.DirectionsService();
  var directionsDisplay2 = new google.maps.DirectionsRenderer();

  var map = new google.maps.Map(document.getElementById('car_map'), {
    zoom:7,
    center: {lat: <%= @origin[0]%>, lng: <%= @origin[1]%>}, 
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  var map2 = new google.maps.Map(document.getElementById('bus_map'), {
    zoom:7,
    center: {lat: <%= @origin[0]%>, lng: <%= @origin[1]%>},
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  directionsDisplay.setMap(map);
  directionsDisplay2.setMap(map2);

  var carRequest = {
    origin: {lat: <%= @origin[0]%>, lng: <%= @origin[1]%>}, 
    destination: {lat: <%=@destination[0]%>, lng: <%=@destination[1]%>},
    travelMode: google.maps.DirectionsTravelMode.DRIVING
  };

  var busRequest = {
    origin: {lat: <%= @origin[0]%>, lng: <%= @origin[1]%>}, 
    destination: {lat: <%=@destination[0]%>, lng: <%=@destination[1]%>},
    travelMode: google.maps.DirectionsTravelMode.TRANSIT
  };

  directionsService.route(carRequest, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
    }
  });

  directionsService2.route(busRequest, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
    }
  });

</script>

我很感激任何建议。谢谢！

Answer 1

两个问题：

1. 您只有一个原点/目标数组，因此两个地图看起来完全相同。通过使它们与众不同来解决这个问题。
2. 如果您在路线请求中收到错误，则会无声地失败。通过在出现错误的情况下添加通知来解决此问题。

proof of concept fiddle

代码段

＆＃13;
＆＃13;
var origin = [40.7127837, -74.0059413];
var destination = [40.735657, -74.1723667];


var directionsService = new google.maps.DirectionsService();
var directionsDisplay = new google.maps.DirectionsRenderer();
var directionsService2 = new google.maps.DirectionsService();
var directionsDisplay2 = new google.maps.DirectionsRenderer();

var map = new google.maps.Map(document.getElementById('car_map'), {
  zoom: 7,
  center: {
    lat: origin[0][0],
    lng: origin[0][1]
  },
  mapTypeId: google.maps.MapTypeId.ROADMAP
});

var map2 = new google.maps.Map(document.getElementById('bus_map'), {
  zoom: 7,
  center: {
    lat: origin[1][0],
    lng: origin[1][1]
  },
  mapTypeId: google.maps.MapTypeId.ROADMAP
});

directionsDisplay.setMap(map);
directionsDisplay2.setMap(map2);

var carRequest = {
  origin: {
    lat: origin[0],
    lng: origin[1]
  },
  destination: {
    lat: destination[0],
    lng: destination[1]
  },
  travelMode: google.maps.DirectionsTravelMode.DRIVING
};

var busRequest = {
  origin: {
    lat: origin[0],
    lng: origin[1]
  },
  destination: {
    lat: destination[0],
    lng: destination[1]
  },
  travelMode: google.maps.DirectionsTravelMode.TRANSIT
};

directionsService.route(carRequest, function(response, status) {
  if (status == google.maps.DirectionsStatus.OK) {
    directionsDisplay.setDirections(response);
  } else {
    alert("car directions failed: " + status)
  }
});

directionsService2.route(busRequest, function(response, status) {
  if (status == google.maps.DirectionsStatus.OK) {
    directionsDisplay2.setDirections(response);
  } else {
    alert("bus directions failed: " + status)
  }
});
＆＃13;
html,
body {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
#car_map,
#bus_map {
  height: 50%;
  width: 100%;
}
＆＃13;
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="car_map" style="width:400px; height:450px;"></div>
<div id="bus_map" style="width:400px; height:450px;"></div>
＆＃13;
＆＃13;
＆＃13;