0

我是 Java Script 新手，有一个简单的问题：我使用 Googlemaps API (TransitLayer) 进行路由。路由工作，方向面板创建成功，但不幸的是蓝色路由线没有出现在地图上。这可能与我对地图的异步初始化有关。（回调函数）见下面我的 javascript 函数，这里是我页面的链接： 我的网站（标签 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);
4

1 回答 1

0

您的答案可能与DirectionsRenderer. 您可以为其提供选项，并且在大多数情况下，您将需要它。

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

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

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

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

注意事项：

  1. 是$("#elementID")，不是$("elementID")
  2. 是$("#input").val()，不是$("#input").value
  3. Google Maps API 不接受回调（这是一个非常严重的问题，因为它会阻止 AMD 加载程序加载它）
  4. 当上述所有点都固定后，这条线就可以自行工作了。
于 2013-05-26T16:54:03.230 回答