Question

您可以在我的网络应用程序中创建标记，并使用带有这些标记的Google方向创建路线。但我希望用户能够改变路线，并且我在google maps api v3中找到了可拖动的路线。有没有办法在数据库中保存更改的方向，以便您可以使用该信息再次创建确切的路线？

Answer 1

我将假设以下情况属实：

var map = new google.maps.Map(document.getElementById('map_canvas'), {
        zoom: 8,
        center: new google.maps.LatLng(/* center of map */),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }),
    directions = new google.maps.DirectionsService(),
    displayer = new google.maps.DirectionsRenderer({
        draggable: true
    });

displayer.setMap(map);
directions.route({
    origin: new google.maps.LatLng(/* start point */),
    destination: new google.maps.LatLng(/* end point */),
    travelMode: google.maps.DirectionsTravelMode.DRIVING
}, function (result) {
    displayer.setDirections(result);
});

基本上，这只是假设已经选择了起点和终点，并且已经绘制了默认路线。（注意： DirectionsRenderer已使用draggable: true初始化。）

当用户更改路线时，应用程序会触发directions_changed事件。我们可以这样跟踪：

google.maps.event.addListener(displayer, 'directions_changed', some_method);

当更改路线时，还会发生其他：创建新的waypoint。以下是我们如何获得所有航点：

var some_method = function () {
    var waypoints = displayer.directions.route[0].legs[0].via_waypoint;
};

变量waypoints是一个对象数组，描述了路径到达目的地的路径。（请注意，已做出更多假设：您正在使用route[0]，legs[0]等。）

每个waypoint对象都有location属性，其中包含纬度和经度（由于某种原因，分别在location.wa和location.ya中可用）。因此，每次用户更改路线时，我们都可以告诉应用程序旋转（并存储）当前航路点的所有路径和长路。获得后，您可以决定如何存储它们（AJAX到存储在数据库中的服务器端页面，localStorage等）。

然后！

下次加载此页面时，您可以从存储中获取这些航点并初始化路线，如下所示：

directions.route({
    origin: new google.maps.LatLng(/* start point */),
    destination: new google.maps.LatLng(/* end point */),
    travelMode: google.maps.DirectionsTravelMode.DRIVING,
    waypoints: [
        { location: new google.maps.LatLng(/* lat/lng go here */) } // repeat this as necessary
    ]
}, function (result) {
    displayer.setDirections(result);
});

这应该维护用户选择的新路线。最后一点：我从这个答案中留下了很多，比如他们如何保存它，你怎么知道哪个用户想要哪条路线等等。但基础就在那里。一帆风顺。

Answer 2

这可能是sdleihssirhc的回答和现在之间发生了变化的事情，但是我尝试了上面的解决方案并且它仍然在displayer.directions.route [0]上失败了说这是未定义的。

看起来该属性已更改为routes，这花了我一段时间才弄明白。使用下面的代码对我有用：

var waypoints = displayer.directions.routes[0].legs[0].via_waypoint;

希望这会为试图让这个工作的人节省一些时间和挫折感。

Google地图可以保存可拖动的路线

2 个答案: