Question

我是Java Script的新手，有一个简单的问题：我使用Googlemaps API（TransitLayer）进行路由。路由工作，方向面板成功创建，但不幸的是，蓝色路由线没有出现在地图上。它可能与我对地图的异步初始化有关。（回调函数）请参阅下面的我的javascript函数在这里链接到我的页面： My website（标签2：路由）。

非常感谢任何帮助。

var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
routingcounter = 0;
var routingmap;
var mapOptions;

function initialize_routing() {
  directionsDisplay = new google.maps.DirectionsRenderer();
   mapOptions = {
    zoom: 8,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    center: new google.maps.LatLng(51.510799, -0.134332)
  };
    routingmap = new google.maps.Map(document.getElementById('mycanvas'),
      mapOptions);
  directionsDisplay.setMap(routingmap);
  directionsDisplay.setPanel(document.getElementById('directions-panel'));

  var transitLayer = new google.maps.TransitLayer();
  transitLayer.setMap(routingmap);

}


function loadScript() {

  if(routingcounter == 0)
  {
  var script = document.createElement("script");
  script.type = "text/javascript";
  script.src = "https://maps.googleapis.com/maps/api/js?sensor=false&callback=initialize_routing";
  document.body.appendChild(script);
  routingcounter++;
  }

}


function compute_route()
{


    var start = $('from').value;
    var over = $('over').value;
    var waypts = [];

    var end = $('to').value;

    if ($('from').value == "" || $('to').value=="")
    {
        alert("Fill in From- and To-Textfields! Try again!");
        return;
    }

    start += ",London"

    end += ",London"

    if($('over').value == "")
    {
        var request = {
            origin: start,
            destination: end,
            travelMode: google.maps.TravelMode.TRANSIT
        };
    }
    else
    {
        over += ",London"

        waypts.push({
          location:over,
          stopover:true
      });


        var request = {
            origin: start,
            destination: end,
            waypoints: waypts,
            optimizeWaypoints: true,
            travelMode: google.maps.TravelMode.TRANSIT
        };
    }




  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) 
    {
      directionsDisplay.setDirections(response);
    }
    else
    {
        alert("No matching places found. Retry please!");
        $('from').value == "";
        $('over').value == "";
        $('to').value == "";

    }
  });




}

    google.maps.event.addDomListener(window, 'load', initialize_routing);

Answer 1

您的回答可能是DirectionsRenderer的选项。你可以提供选项，在大多数情况下，你需要这个。

 {
   suppressPolylines: false,
   polylineOptions: // polylineOptions object here
 }

suppressPolylines将在地图上启用折线。然后可以使用第二个对象设置选项：填充，描边等，与配置折线的方式相同。

从您的代码构建一个小提琴，我将对其进行编辑以实现它。

修改：更正了您的代码 - 小提琴http://tinker.io/14b5a。

注意事项：

它是$("#elementID")，而不是$("elementID")
它是$("#input").val()，而不是$("#input").value
Google Maps API不接受回调（这是非常严重的一点，因为它会阻止AMD加载程序加载它）。
如果上述所有点都已修复，则该线条可以单独使用。

谷歌地图路由，蓝色路由线不在地图上显示

1 个答案: