首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >使用谷歌地图API呈现一张地图的多种旅行模式

使用谷歌地图API呈现一张地图的多种旅行模式
EN

Stack Overflow用户
提问于 2014-04-07 20:51:39
回答 1查看 8.1K关注 0票数 1

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

代码语言:javascript
运行
复制
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);
      }

是否有可能在地图上呈现这三组结果?

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2014-04-08 00:49:00

根据请求,使用多个DirectionsRenderer-实例(AFAIK,对使用的实例没有限制)的示例:

代码语言:javascript
运行
复制
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/

注意:我的例子使用了累加,它不会导致一个连续的路线。若要获得包含附件的连续路由,您必须一个接一个地发送请求,并使用上一个响应的目标-LatLng作为下一个请求的源。

票数 7
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/22922856

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档