个人中心
gpt4 book ai didi

google-maps - 我如何从头到尾获取谷歌地图v3方向坐标

转载 作者：行者123 更新时间：2023-12-01 11:53:45 26 4
gpt4 key购买 nike

我有一个使用 google maps 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 点(标记)之间所有路线的所有坐标(纬度、经度)？我需要将方向从数据库绘制回 map 。

我能够得到两点之间的第一组坐标，如下所示:

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

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

最佳答案

overview_path 只会让您概览(即简化的行)。如果这适合您的用例，请务必使用它。否则，请继续阅读。

DirectionsRoute对象有一个 legs 属性。这是 DirectionsLeg 的数组对象，它又具有 steps 的属性。每个DirectionsStep有一个路径。

如果您收集所有腿的所有步骤的所有路径，您将能够构建详细的路径对于整个路线。

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

考虑使用 Directions API ，可作为 PHP 的 Web 服务访问。特别是，您可能希望从用户定义的路径(拖动)中获取航路点并将它们发送到您的服务器，以便它可以运行适当的 Directions API

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

关于google-maps - 我如何从头到尾获取谷歌地图v3方向坐标，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9014830/

26 4 0
文章推荐： flash - 如何监控 Flash 对象和服务器之间的流量？
文章推荐： java - Apache POI OPCPackage 无法保存 Jasper 报告生成的 XLSX
文章推荐： java - JFrame 不会及时消失以进行屏幕截图
文章推荐： GWT 和 Hibernate 验证器
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com