Question

希望有人可以帮我解决谷歌地图API v3中的一个小问题。

我正在开发一个网页，您可以在其中选择原点和目的地，并计算路线，以及所有纬度和经度坐标，我可以移动标记。

问题在于，当我移动标记时，我希望使用新值更新“坐标”面板，但事实并非如此。

我正在添加代码和一对图片，希望有人可以提供帮助。

非常感谢！

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
<script>

    var rendererOptions = {
        draggable: true
    };
    var directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);;
    var directionsService = new google.maps.DirectionsService();
    var map;

    var trucka = new google.maps.LatLng(21.984797, -102.27668);

    function initialize() {

        var mapOptions = {
            zoom: 7,
            center: trucka
        };
        map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
        directionsDisplay.setMap(map);
        //directionsDisplay.setPanel(document.getElementById('directionsPanel'));
        directionsDisplay.setPanel(document.getElementById('hola'));


        google.maps.event.addListener(directionsDisplay, 'directions_changed', function () {
            computeTotalDistance(directionsDisplay.getDirections());
        });

        calcRoute();
    }

    function calcRoute() {
        alert('carajo');
        var lat = document.getElementById('hdnLatitudOrigen').value;
        var lon = document.getElementById('hdnLongitudOrigen').value;
        var request = {
            origin: new google.maps.LatLng(lat, lon),
            destination: new google.maps.LatLng(document.getElementById('hdnLatitudDestino').value, document.getElementById('hdnLongitudDestino').value),
            /* waypoints: [
                 { location: new google.maps.LatLng(document.getElementById('hdnLatitudParada1').value, document.getElementById('hdnLongitudParada1').value) },
                 { location: new google.maps.LatLng(document.getElementById('hdnLatitudParada2').value, document.getElementById('hdnLongitudParada2').value) },
                 { location: new google.maps.LatLng(document.getElementById('hdnLatitudParada3').value, document.getElementById('hdnLongitudParada3').value) },
                 { location: new google.maps.LatLng(document.getElementById('hdnLatitudParada4').value, document.getElementById('hdnLongitudParada4').value) },
                 { location: new google.maps.LatLng(document.getElementById('hdnLatitudParada5').value, document.getElementById('hdnLongitudParada5').value) }
             ],*/
            travelMode: google.maps.TravelMode.DRIVING,
            provideRouteAlternatives: true,
            avoidHighways: false,
            avoidTolls: false
        };
        directionsService.route(request, function (response, status) {
            if (status == google.maps.DirectionsStatus.OK) {
                directionsDisplay.setDirections(response);
                if (response.routes && response.routes.length > 0) {
                    var routes = response.routes;
                    for (var j = 0; j < routes.length; j++) {
                        var points = routes[j].overview_path;
                        var ul = document.getElementById("vertex");
                        for (var i = 0; i < points.length; i++) {
                            var li = document.createElement('li');
                            li.innerHTML = getLiText(points[i]);
                            ul.appendChild(li);
                        }
                    }
                }
            }
        });
    }

    function getLiText(point) {
        var lat = point.lat(),
            lng = point.lng();
        return "lat: " + lat + " lng: " + lng;
    }

    function computeTotalDistance(result) {
        var total = 0;
        var myroute = result.routes[0];
        for (var i = 0; i < myroute.legs.length; i++) {
            total += myroute.legs[i].distance.value;
        }
        total = total / 1000.0;
        document.getElementById('total').innerHTML = total + ' km';
    }

    google.maps.event.addDomListener(window, 'load', initialize);

</script>

<div id="map-canvas" style="float: left; width: 70%; height: 100%"></div>
<div id="hola">
    <label>Puntos</label>
    <ul id="vertex">
    </ul>
</div>
<div id="directionsPanel" style="float: right; width: 30%; height 100%">
    <p>Total Distance: <span id="total"></span></p>
</div>

Original route New route

Answer 1

您需要为DirectionsRenderer对象添加一个侦听器，以获取“directions_changed”事件。然后删除<ul>的内容并从新路由重新创建它。

google.maps.event.addListener(directionsDisplay, 'directions_changed', updateInfo);
updateInfo();

function updateInfo() {
    var route = directionsDisplay.getDirections().routes[0];
    // var routes = response.routes;
    var points = route.overview_path;
    var ul = document.getElementById("vertex");
    var elems = ul.getElementsByTagName("li")
    for (var i=0; i<elems.length; i++) {
        elems[i].parentNode.removeChild(elems[i]);
    }
    for (var i = 0; i < points.length; i++) {
        var li = document.createElement('li');
        li.innerHTML = getLiText(points[i]);
        ul.appendChild(li);
    }
}

working fiddle

工作代码段：

//Fresnillo, Zac., Mexico (23.1709291, -102.86218580000002)
//Zacatecas, Zac., Mexico (22.7709249, -102.58325389999999)
var rendererOptions = {
    draggable: true
};
var directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);
var directionsService = new google.maps.DirectionsService();
var map;

var trucka = new google.maps.LatLng(21.984797, -102.27668);

function initialize() {

    var mapOptions = {
        zoom: 7,
        center: trucka
    };
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
    directionsDisplay.setMap(map);
    //directionsDisplay.setPanel(document.getElementById('directionsPanel'));
    directionsDisplay.setPanel(document.getElementById('hola'));


    google.maps.event.addListener(directionsDisplay, 'directions_changed', function () {
        computeTotalDistance(directionsDisplay.getDirections());
    });

    calcRoute();
}

function calcRoute() {
    // alert('carajo');
    var lat = document.getElementById('hdnLatitudOrigen').value;
    var lon = document.getElementById('hdnLongitudOrigen').value;
    var request = {
        origin: new google.maps.LatLng(lat, lon),
        destination: new google.maps.LatLng(document.getElementById('hdnLatitudDestino').value, document.getElementById('hdnLongitudDestino').value),
        /* waypoints: [
                 { location: new google.maps.LatLng(document.getElementById('hdnLatitudParada1').value, document.getElementById('hdnLongitudParada1').value) },
                 { location: new google.maps.LatLng(document.getElementById('hdnLatitudParada2').value, document.getElementById('hdnLongitudParada2').value) },
                 { location: new google.maps.LatLng(document.getElementById('hdnLatitudParada3').value, document.getElementById('hdnLongitudParada3').value) },
                 { location: new google.maps.LatLng(document.getElementById('hdnLatitudParada4').value, document.getElementById('hdnLongitudParada4').value) },
                 { location: new google.maps.LatLng(document.getElementById('hdnLatitudParada5').value, document.getElementById('hdnLongitudParada5').value) }
             ],*/
        travelMode: google.maps.TravelMode.DRIVING,
        provideRouteAlternatives: true,
        avoidHighways: false,
        avoidTolls: false
    };
    directionsService.route(request, function (response, status) {
        if (status == google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(response);
            google.maps.event.addListener(directionsDisplay, 'directions_changed', updateInfo);
            updateInfo();
        }
    });
}

function updateInfo() {
    var route = directionsDisplay.getDirections().routes[0];
    // var routes = response.routes;
    var points = route.overview_path;
    var ul = document.getElementById("vertex");
    var elems = ul.getElementsByTagName("li")
    for (var i=0; i<elems.length; i++) {
        elems[i].parentNode.removeChild(elems[i]);
    }
    for (var i = 0; i < points.length; i++) {
        var li = document.createElement('li');
        li.innerHTML = getLiText(points[i]);
        ul.appendChild(li);
    }
}

function getLiText(point) {
    var lat = point.lat(),
        lng = point.lng();
    return "lat: " + lat + " lng: " + lng;
}

function computeTotalDistance(result) {
    var total = 0;
    var myroute = result.routes[0];
    for (var i = 0; i < myroute.legs.length; i++) {
        total += myroute.legs[i].distance.value;
    }
    total = total / 1000.0;
    document.getElementById('total').innerHTML = total + ' km';
}

google.maps.event.addDomListener(window, 'load', initialize);

<script src="https://maps.googleapis.com/maps/api/js"></script>
<input id='hdnLatitudOrigen' value="23.1709291" />
<input id='hdnLongitudOrigen' value="102.86218580" />
<input id='hdnLatitudDestino' value="22.7709249" />
<input id='hdnLongitudDestino' value="102.58325389999999" />
<div id="map-canvas" style="width: 100%; height: 400px"></div>
<div id="hola">
    <label>Puntos</label>
    <ul id="vertex"></ul>
</div>
<div id="directionsPanel" style="width: 30%; height:600px;">
    <p>Total Distance: <span id="total"></span>

    </p>
</div>

更新纬度和经度overview_path谷歌地图

1 个答案: