多种出行模式，使用谷歌地图 API 渲染一张地图

Multiple travel modes to render one map using google maps API

本文关键字：地图 一张 API 谷歌地图 模式      更新时间：2023-09-26

我有两种不同的旅行类型。由于两种不同的旅行类型，我使用了 3 个请求，并为每个请求指定了旅行类型。

App.directionsService.route(startLeg, function(result, status) {
      if (status == google.maps.DirectionsStatus.OK) {
        App.directionsDisplay1.setDirections(result);
      }
    }); 
App.directionsService.route(middleLeg, function(result, status) {
      if (status == google.maps.DirectionsStatus.OK) {
        App.directionsDisplay2.setDirections(result);
      }
    });
App.directionsService.route(endLeg, function(result, status) {
      if (status == google.maps.DirectionsStatus.OK) {
        App.directionsDisplay3.setDirections(result);
      }

是否可以在地图上渲染所有三组结果？

根据要求，使用多个 DirectionsRenderer-实例的示例（AFAIK 对使用的实例没有限制）：

var goo = google.maps,
    map = new goo.Map(document.getElementById('map-canvas'), {
      center: new goo.LatLng(52.52, 13.40),
      zoom: 10
    }),
    App = {
      map: map,
      bounds: new goo.LatLngBounds(),
      directionsService: new goo.DirectionsService(),
      directionsDisplay1: new goo.DirectionsRenderer({
        map: map,
        preserveViewport: true,
        polylineOptions: {
          strokeColor: 'red'
        }
      }),
      directionsDisplay2: new goo.DirectionsRenderer({
        map: map,
        preserveViewport: true,
        polylineOptions: {
          strokeColor: 'blue'
        }
      }),
      directionsDisplay3: new goo.DirectionsRenderer({
        map: map,
        preserveViewport: true,
        polylineOptions: {
          strokeColor: 'yellow'
        }
      })
    },
    startLeg = {
      origin: 'Rome',
      destination: 'Paris',
      travelMode: goo.TravelMode.DRIVING
    },
    middleLeg = {
      origin: 'Paris',
      destination: 'Berlin',
      travelMode: goo.TravelMode.TRANSIT
    },
    endLeg = {
      origin: 'Berlin',
      destination: 'Buxtehude',
      travelMode: goo.TravelMode.BICYCLING
    };
  App.directionsService.route(startLeg, function (result, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      App.directionsDisplay1.setDirections(result);
      App.map.fitBounds(App.bounds.union(result.routes[0].bounds));
    }
  });
  App.directionsService.route(middleLeg, function (result, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      App.directionsDisplay2.setDirections(result);
      App.map.fitBounds(App.bounds.union(result.routes[0].bounds));
    }
  });
  App.directionsService.route(endLeg, function (result, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      App.directionsDisplay3.setDirections(result);
      App.map.fitBounds(App.bounds.union(result.routes[0].bounds));
    }
  });

演示（包括说明面板）：http://jsfiddle.net/doktormolle/y6xEP/

注意：我的示例使用地址，它不会导致连续路由。要获得带有地址的连续路由，您必须逐个发送请求，并使用上一个响应的 destination-LatLng 作为下一个请求的源

相关文章：