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

问题描述

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

解决方案

我会假设以下情况都是真的：

  var map = new google.maps.Map（document.getElementById（'map_canvas'），{
 zoom：8，
 center：new google.maps .LatLng（/ *地图中心* /），
 mapTypeId：google.maps.MapTypeId.ROADMAP 
}），
 directions = new google.maps.DirectionsService（），
 displaysyer = new google.maps.DirectionsRenderer（{
 draggable：true 
}）; 
 
 displaysyer.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）{
 displaysyer.setDirections（result）; 
}）; 
  

基本上，这只是假定已经选择了起点和终点，并且缺省路线已经绘制完毕。 （注意： DirectionsRenderer 已经初始化为 draggable：true 。）

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

  google.maps.event.addListener（displaysyer，'directions_changed'，some_method）; 
  

其他的 也会在更改路线时发生：新的航点被创建。以下是我们如何获得所有路标：

  var some_method = function（）{
 var waypoints = displaysyer.directions .route [0] .legs [0] .via_waypoint; 
}; 
  

变量 waypoints 是一个对象数组描述路线在前往目的地途中停靠的路线。 （请注意，已经做出了更多的假设：您正在使用 route [0] ， legs [0] 等。）

每个 waypoint 对象都有一个位置属性，其中包含纬度和经度（出于某种原因，分别在 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 * /）} //根据需要重复此操作
] 
}，function（result）{
 displaysyer.setDirections（result ）; 
}）; 
  

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

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

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.)

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

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.)

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.)

Then!

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.

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