谷歌地图节约dragable方向 [英] Google maps saving dragable directions

问题描述

您可以在我的web应用程序中创建标记，并创建与这些标记谷歌方向的路线。但我希望用户能够改变路线藏汉我发现dragable方向的谷歌地图API V3。有没有办法改变的方向保存在数据库中，以便你可以用这些信息重新创建精确的路线？

You can create markers in my web application and create a route with google directions with those markers. But I want the user to be able to change the route aswell and i've found dragable directions in the google maps api v3. Is there a way to save the changed directions in the database so you can create the exact route again with that information ?

推荐答案

我要假设以下所有条件：

I'm going to assume that the following is all true:

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 已与初始化拖动：真正的）

当用户改变了路线，应用程序触发一个 directions_changed 事件。我们可以跟踪像这样：

When the user changes the route, the application fires a directions_changed event. We can track that like so:

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

一个新的航点创建：

别的东西的也的变化的路由时发生。下面是我们如何让所有航点：

Something else also happens when the change the route: a new waypoint is created. Here's how we get at all the waypoints:

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

变量航点是描述的路线使得在它的途中到目的地车站对象的数组。 （请注意，更多的假设已经作出：你使用路线[0] ，腿[0] 等。）

The variable waypoints is an array of objects describing the stops the route makes on its way to the destination. (Note that more assumptions have been made: you're using route[0], legs[0], etc.)

每个航点对象有一个位置属性，它包含了<$ C $的经度和纬度（可C> location.wa 和 location.ya 分别出于某种原因）。因此，我们可以让应用程序，每一个用户改变航线时，旋转到（和存储）当前航路点的所有拉特和多头。一旦你拥有了这些，你可以决定要如何（AJAX到将它们存储在数据库中，的localStorage 等服务器端页）存储它们。

Each waypoint object has a location property, which contains the latitude and longitude (available in location.wa and location.ya respectively, for some reason). So we can tell the application, every time the user changes the route, to rotate through (and store) all the lats and longs of the current waypoints. Once you have those, you can decide how you want to store them (AJAX to a server-side page that stores them in a database, localStorage, etc.)

然后！

下一次加载这个页面，你可以抓住从存储的航点和初始化像这样的路线：

The next time you load this page, you can grab those waypoints from the storage and initialize the route like so:

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);
});

这应该维护用户选择了新的途径。最后一点：我离开的很多出这个答案，像的如何的他们保存它，你怎么知道哪个用户希望哪条路线等，但基础是存在的。一帆风顺。

This should maintain the new route that the user chose. One final note: I left a lot out of this answer, like how they save it, how you know which user wants which route, etc. But the foundation is there. Godspeed.

这篇关于谷歌地图节约dragable方向的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！