Question

我有谷歌地图v3和php的应用程序。我需要动态添加方向路线到谷歌地图，并用PHP将它们插入数据库。工作示例为http://pastehtml.com/view/blzvshf3l.html，代码为：

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Add Route</title>
    <style>
html, body {
    margin: 0;
    padding: 0;
}

#map_canvas {
    height: 600px;
    margin-bottom:20px;
}

@media print {
    html, body {
        height: auto;
    }

    #map_canvas {
        height: 650px;
    }
}

#controls{
    margin-bottom:20px;
}
#debug{
    height:200px;
    overflow:auto;
    margin-bottom:20px;
}
#description{
    margin-bottom:20px;
}
</style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>

    <script type="text/javascript">
    var map;
    var markers = [];
    var directions = [];

    function initialize() {
        var bm = new google.maps.LatLng(47.65668913620708, 23.56867790222168);
        var myOptions = {
            zoom: 16,
            center: bm,
            minZoom: 13,
            maxZoom: 17,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);

        google.maps.event.addListener(map, 'click', addRoute);
    }

    function addRoute(event) {
        if(markers.length < 2){
            var marker = new google.maps.Marker({
                position: event.latLng,
                map: map,
                draggable: true
            });
            markers.push(marker);
        }

        if(markers.length == 2){
            var start = markers[0].getPosition();
            var end = markers[1].getPosition();
            putDirections(start, end);

            $(markers).each(function(i, marker){
                google.maps.event.addListener(marker, 'dragend', function(){
                    clearDirections();
                    var start = markers[0].getPosition();
                    var end = markers[1].getPosition();
                    putDirections(start, end);
                });
            });
        }
    }

    function putDirections(start, end){
        var direction = [];

        var polylineOptions = {
            map: map,
            strokeColor: '#000000',
            strokeOpacity: 1.0,
            strokeWeight: 5
        }
        direction['directionsDisplay'] = new google.maps.DirectionsRenderer({
            polylineOptions: polylineOptions,
            suppressInfoWindows: true
        });
        direction['directionsDisplay'].suppressMarkers = true;
        direction['directionsDisplay'].preserveViewport = true;
        direction['directionsDisplay'].draggable = true;

        direction['directionsService'] = new google.maps.DirectionsService();

        var request = {
            origin:start,
            destination:end,
            travelMode: google.maps.DirectionsTravelMode.WALKING //DRIVING, WALKING, BICYCLING
        };
        direction['directionsDisplay'].setMap(map);

        direction['directionsService'].route(request, function(response, status){
            if(status == google.maps.DirectionsStatus.OK){
                direction['directionsDisplay'].setDirections(response);
            }
        });

        directions.push(direction);
    }

    function clearMarkers(){
        $(markers).each(function(i, marker){
            marker.setMap(null);
        });
        markers = [];
    }

    function clearDirections(){
        $(directions).each(function(i, direction){
            direction['directionsDisplay'].setMap(null);
        });
        directions = [];
    }

    function clearDebug(){
        $('#debug').html('');
    }

    function debug(){
        clearDebug();
        var debug = '';
        $(markers).each(function(i, marker){
            debug += '<b>Marker #'+(i+1)+'</b> position: latitude=<b>'+marker.getPosition().lat()+'</b>, longitude=<b>'+marker.getPosition().lng()+'</b><br>';
        });
        if(markers.length == 0){
            debug += 'Add some markers first!';
        }
        $('#debug').html(debug);
    }
    $(document).ready(function(){
        initialize();
    });
    </script>

</head>
<body>
    <div id="map_canvas"></div>
    <div id="controls">
        <input type="button" value="Reset Directions and Markers" onclick="clearMarkers();clearDirections();clearDebug();">
        <input type="button" value="Get Markers Location" onclick="debug();">
    </div>
    <div id="description">

        <strong>Description:</strong><br>

        Markers and routes can be dragged to create a new directions. They can also be deleted.
    </div>
    <div id="debug"></div>
</body>
</html>

我需要能够改变（拖动）路线（例子就是这样）。问题是：如何获得2点（标记）之间所有路线的所有坐标（lat，lng）？我需要绘制从数据库到地图的方向。

我能够获得2点之间的第一组坐标，如下所示：

 directions[0]['directionsDisplay'].getDirections().routes[0].overview_path

这是一个坐标数组。这是获得坐标的正确方法吗？拖动路线时的事件名称是什么？

Answer 1

overview_path只会为您提供概述（即简化的行）。如果这对你的用例很好，那么一定要使用它。否则，请继续阅读。

DirectionsRoute对象具有legs属性。这是一个DirectionsLeg个对象的数组，而这些对象的属性为steps。每个DirectionsStep都有path。

如果您为所有path收集了steps的所有legs，那么您将能够构建整条路线的详细路径。

此外，执行此操作后，如果要减小发送回PHP服务器的大小，请使用encoding库来压缩路径。

考虑使用Directions API，可以作为PHP的Web服务访问。特别是，您可能希望从用户定义的路径中获取路径（拖动）并将其发送到您的服务器，以便它可以运行相应的Directions API

用户完成拖动路径时触发的事件称为directions_changed。请参阅DirectionsRenderer的参考资料。

Answer 2

您在移动航点时是否看过网络流量？

返回包含

等信息的AJAX结果

"overview_polyline" : { "points" : "yd{aHkwwnC AZM \ JC〜AdMnA | KTpBeGv @ {@ QS} A_ ^ hCYb @ MrDqBTa @ LC @ @@直流办公自动化@ oDWoCi @ WHW @ uLMoCG_CEqHA] d BEFK @磅@一个@ lEaCdJaF |？AgALQFQFURgCZiKJ [DO？KEIAs @德布” }， `

如果您可以解码可能有趣的“积分”信息。

如何从头到尾获得谷歌地图v3方向坐标

2 个答案: