Google Map API V3。无法为TRANSIT方向创建自定义多段线 [英] Google Map API V3. Unable to create custom polyline for TRANSIT directions

问题描述

我无法为Google API上的公交路线创建自定义折线。只有部分路线被渲染，并非全部。它适用于驾驶，行走和放松。但不是为了过境。不知道我到底错过了什么。如果有人遇到同样的问题，请帮忙！
我在小提琴中做了一个例子：

http://jsfiddle.net/srs/vF2e9/1/

示例代码

  var directionsDisplay，map; 
 var directionsService = new google.maps.DirectionsService（）; 
 
函数initialize（）{
 directionsDisplay = new google.maps.DirectionsRenderer（）; 
 var mapOptions = {
 zoom：7，
 mapTypeId：google.maps.MapTypeId.ROADMAP，
 center：new google.maps.LatLng（41.850033，-87.6500523）
}; 
 map = new google.maps.Map（document.getElementById（'map-canvas'），mapOptions）; 
 directionsDisplay.setMap（map）; 
 calcRoute（）; 
} 
 
函数calcRoute（）{
 var start =98012; 
 var end =98014; 
 var request = {
 origin：start，
 destination：end，
 travelMode：google.maps.TravelMode.TRANSIT 
}; 
 directionsService.route（request，function（response，status）{
 if（status == google.maps.DirectionsStatus.OK）{
 var polyLine = new google.maps.Polyline（{ 
 strokeColor：'＃FF0000'
}）; 
 var options = {}; 
 options.directions = response; 
 options.map = map; 
 options.polylineOptions = polyLine; 
 //options.suppressMarkers = true; 
 directionsDisplay.setOptions（options）; // = new google.maps.DirectionsRenderer（options）; 
 polyLine.setMap （map）; 
 //directionsDisplay.setDirections（response）; 
} 
}）; 
} 
  

解决方案

polylineOptions匿名对象不是（而不应该是）google.maps.Polyline。

  directionsService.route（request，function（response，status） {
 if（status == google.maps.DirectionsStatus.OK）{
 var polyLineOptions = {
 strokeColor：'＃FF0000'
}; 
 var options = {}; 
 options.directions = response; 
 options.map = map; 
 options.polylineOptions = polyLineOptions; 
 //options.suppressMarkers = true; 
 directionsDisplay .setOptions（options）; // = new google.maps.DirectionsRenderer（options）; 
 polyLine.setMap（map）; 
 //directionsDisplay.setDirections（response）; 
} 
}）; 
  

更新小提琴

I am unable to create custom polyline for transit directions on Google API. Only part of the route is rendered, not all. It works for driving, walking & cycling but not for transit. Not sure what exactly am I missing. If someone has faced the same issue, please help! I have made an example in fiddle:

http://jsfiddle.net/srs/vF2e9/1/

Sample Code

var directionsDisplay, map;
  var directionsService = new google.maps.DirectionsService();

  function initialize() {
    directionsDisplay = new google.maps.DirectionsRenderer();
    var mapOptions = {
      zoom: 7,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      center: new google.maps.LatLng(41.850033, -87.6500523)
    };
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
    directionsDisplay.setMap(map);
    calcRoute();
  }

  function calcRoute() {
    var start = "98012";
    var end = "98014";
    var request = {
      origin: start,
      destination: end,
      travelMode: google.maps.TravelMode.TRANSIT
    };
    directionsService.route(request, function(response, status) {
      if (status == google.maps.DirectionsStatus.OK) {
        var polyLine = new google.maps.Polyline({
            strokeColor: '#FF0000'
          });
        var options = {};
        options.directions = response;
        options.map = map;
        options.polylineOptions = polyLine;
        //options.suppressMarkers = true;
        directionsDisplay.setOptions(options);// = new google.maps.DirectionsRenderer(options);
        polyLine.setMap(map);
        //directionsDisplay.setDirections(response);
      }
    });
  }

解决方案

A polylineOptions anonymous object is not (and shouldn't be) a google.maps.Polyline.

directionsService.route(request, function(response, status) {
  if (status == google.maps.DirectionsStatus.OK) {
    var polyLineOptions = {
        strokeColor: '#FF0000'
      };
    var options = {};
    options.directions = response;
    options.map = map;
    options.polylineOptions = polyLineOptions;
    //options.suppressMarkers = true;
    directionsDisplay.setOptions(options);// = new google.maps.DirectionsRenderer(options);
    polyLine.setMap(map);
    //directionsDisplay.setDirections(response);
  }
});

updated fiddle

这篇关于Google Map API V3。无法为TRANSIT方向创建自定义多段线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！