谷歌地图保存可拖动的方向 [英] Google maps saving draggable directions

问题描述

您可以在我的 Web 应用程序中创建标记，并使用这些标记创建带有 google 路线的路线.但是我希望用户也能够更改路线，并且我在 google maps 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 draggable 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 已经用 draggable: true 初始化.)

Basically, this just assumes that the start- and end-points have already been chosen and the default route has already been drawn. (NOTE: The DirectionsRenderer has been initialized with draggable: true.)

当用户更改路线时，应用程序会触发 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);

其他事情也在改变路线时发生:一个新的waypoint被创建.以下是我们如何到达所有航点:

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

变量 waypoints 是一个对象数组，描述了路线在前往目的地的途中所经过的停靠点.(请注意，已经做出了更多假设:您正在使用 route[0]、legs[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.)

每个 waypoint 对象都有一个 location 属性，其中包含纬度和经度(在 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.

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