动态路由与谷歌方向API

dynamic route with Google directions API

本文关键字：方向 API 谷歌 路由 动态      更新时间：2023-09-26

最初我在地图上有两个点。其中一个是起点，另一个是终点。

原点是可拖动的，而目标是固定的。

在页面加载后第一次绘制地图时，我为原点设置了一些默认值，而目的地点从数据库获取值。初始加载工作良好。我能画出出发地到目的地的路线。

我使用下面的函数

在地图上绘制方向
function calcRoute() {
  var request = {
      origin:myLatLng1,
      destination:myLatLng,
      optimizeWaypoints: true,
      travelMode: google.maps.TravelMode.DRIVING
  };
  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
    }
  });
}

现在我有了一个事件监听器，每当我的原点标记被拖动时，它就会获得原点标记新位置的新latlong，然后我调用上面相同的函数来获得新的路由。

function togglePos(){
    myLatLng1 = new google.maps.LatLng(marker1.getPosition());
    calcRoute();
}

这就是我所面临的问题，我无法在新标记的原点和相同的旧目的地之间重新绘制新的路线。这是我的初始化函数，如果有人需要的话。

function initialize() {
    var mapOptions = {
        zoom: 13,
        center: myLatLng
    };
    map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);
    directionsDisplay.setMap(map);
    var image = 'myimage.png';
    marker = new google.maps.Marker({
          position: myLatLng,
          map: map,
          icon: image,
    });
    marker1 = new google.maps.Marker({
          position: myLatLng1,
          map: map,
          draggable: true
    });
    google.maps.event.addListener(marker1, 'dragend', togglePos);
    calcRoute();
}

我没有得到任何javascript错误。我正在构建这样的东西。
https://developers.google.com/maps/documentation/javascript/examples/directions-simple

但是我不是从下拉框中选择它，而是在移动标记时调用该函数。

小提琴链接:http://jsfiddle.net/FvqAL/4/但是我不知道为什么它不能在小提琴上工作:|

我在calc route中做了一些改变，现在每当它被调用时，它都会得到marker1的位置并通过它绘制路线。

function calcRoute() {
  var request = {
      origin:marker1.getPosition(),
      destination:myLatLng,
      optimizeWaypoints: true,
      travelMode: google.maps.TravelMode.DRIVING
  };
  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
    }
  });
}

这是最后的小提琴，如果你想看看它。谢谢你的帮助:)

相关文章：