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

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;

希望这能为任何试图让它发挥作用的人节省一些时间和挫败感。