Question

我用google地图集成编写了一个脚本。用户可以输入两个位置并计算该位置之间的距离。它工作正常。

这是用户输入位置的原始脚本。

<script type="text/javascript">

    var source, destination;
    var directionsDisplay;
    var directionsService = new google.maps.DirectionsService();
    google.maps.event.addDomListener(window, 'load', function () {
        new google.maps.places.SearchBox(document.getElementById('txtSource'));
        new google.maps.places.SearchBox(document.getElementById('txtDestination'));
        directionsDisplay = new google.maps.DirectionsRenderer({ 'draggable': true });
    });

    function GetRoute() {
        var kl = new google.maps.LatLng(3.1292407,101.6121316);
        var mapOptions = {
            zoom: 7,
            center: kl
        };
        map = new google.maps.Map(document.getElementById('dvMap'), mapOptions);
        directionsDisplay.setMap(map);

        //*********DIRECTIONS AND ROUTE**********************//
        source = document.getElementById("txtSource").value;
        destination = document.getElementById("txtDestination").value;

        var request = {
            origin: source,
            destination: destination,
            travelMode: google.maps.TravelMode.DRIVING
        };
        directionsService.route(request, function (response, status) {
            if (status == google.maps.DirectionsStatus.OK) {
                directionsDisplay.setDirections(response);
            }
        });

        //*********DISTANCE AND DURATION**********************//
        var service = new google.maps.DistanceMatrixService();
        service.getDistanceMatrix({
            origins: [source],
            destinations: [destination],
            travelMode: google.maps.TravelMode.DRIVING,
            unitSystem: google.maps.UnitSystem.METRIC,
            avoidHighways: false,
            avoidTolls: false
        }, function (response, status) {
            if (status == google.maps.DistanceMatrixStatus.OK && response.rows[0].elements[0].status != "ZERO_RESULTS") {
                var distance = response.rows[0].elements[0].distance.text;
                var duration = response.rows[0].elements[0].duration.text;
                var dvDistance = document.getElementById("dvDistance");
                dvDistance.innerHTML = "";
                dvDistance.innerHTML += "Distance: " + distance + "<br />";
                dvDistance.innerHTML += "Duration:" + duration;

            } else {
                alert("Unable to find the distance via road.");
            }
        });
    }
</script>

这是用户输入位置的表格。如果用户点击提交，则距离将显示在下方的谷歌地图中。

<table border="0" cellpadding="0" cellspacing="3">
                        <tr>
                            <td colspan="2">
                                Source:
                                <input type="text" id="txtSource" value="{{ $carpool->from }}" style="width: 200px" />
                                &nbsp; Destination:
                                <input type="text" id="txtDestination" value="{{ $carpool->destination }}" style="width: 200px" />
                                <br />
                                <input type="button" value="Get Route" onclick="GetRoute()" />
                                <hr />
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2">
                                <div id="dvDistance">
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div id="dvMap" style="width: 500px; height: 500px">
                                </div>
                            </td>
                        </tr>
                    </table>

现在我想在其他页面中自动显示距离。问题是脚本无法计算从数据库加载的数据。我使用laravel 5作为后端。我试图将数据传递到此处但未能计算距离。

//*********DIRECTIONS AND ROUTE**********************//
    source = '{{ $user->start}}';
    destination = '{{ $user->end}}';

任何人都可以帮助我？

使谷歌地图自动加载并显示两个位置

0 个答案: