Question

我想在我的网站上使用谷歌地图的方向服务。因为我第一次使用它，我不知道如何从它开始。一个很好的示例代码正是我想要的是： Direction example 当我下载它并在我的浏览器（任何浏览器）中运行以获得它的处理时，地图只会渲染一会然后消失！我不知道为什么？！第二个问题：你知道有没有这样的例子？

提前多多感谢

Answer 1

要在地图上绘制路线，请单击地图两次，以便在两个点上创建路线

var map;
    var infowindow = new google.maps.InfoWindow();
    var wayA;
    var wayB;
    var geocoder = new google.maps.Geocoder();
    var directionsDisplay = new google.maps.DirectionsRenderer({
        suppressMarkers: true,
        panel: document.getElementById('right-panel'),
        draggable: true
    });
    var directionsService = new google.maps.DirectionsService();
    var data = {};
    initMap();
    function initMap() {
        debugger;
        map = new google.maps.Map(document.getElementById('rmap'), {
            center: new google.maps.LatLng(23.030357, 72.517845),
            zoom: 15
        });


        google.maps.event.addListener(map, "click", function (event) {
            if (!wayA) {
                wayA = new google.maps.Marker({
                    position: event.latLng,
                    map: map,
                    icon: "https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=S|00FF00|000000"
                });
                //   calculateAndDisplayRoute(directionsService, directionsDisplay, wayA, wayB);
            } else {
                if (!wayB) {
                    debugger;
                    wayB = new google.maps.Marker({
                        position: event.latLng,
                        map: map,
                        icon: "https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=E|FF0000|000000"
                    });

                    calculateAndDisplayRoute(directionsService, directionsDisplay, wayA, wayB);
                }
            }
        });
    }
    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;
        return total;
    }
    function computeTotalDuration(result) {
        var total = 0;
        var myroute = result.routes[0].legs[0].duration.text;
        return myroute;
    }
    function calculateAndDisplayRoute(directionsService, directionsDisplay, wayA, wayB) {
        debugger;
        directionsDisplay.setMap(map);
      //  directionsDisplay.setPanel(document.getElementById('dvPanel'));
        google.maps.event.addListener(directionsDisplay, 'directions_changed', function () {
            debugger;
            calculateAndDisplayRoute(directionsService, directionsDisplay.getDirections(), wayA, wayB);
        });
        directionsService.route({
            origin: wayA.getPosition(),
            destination: wayB.getPosition(),
            optimizeWaypoints: true,
            travelMode: 'DRIVING'
        }, function (response, status) {
            if (status === 'OK') {
                debugger;

                var route = response.routes[0];
                wayA.setMap(null);
                wayB.setMap(null);
                pinA = new google.maps.Marker({
                    position: route.legs[0].start_location,
                    map: map,
                    icon: "https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=S|00FF00|000000"
                }),
                pinB = new google.maps.Marker({
                    position: route.legs[0].end_location,
                    map: map,
                    icon: "https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=E|FF0000|000000"
                });

                google.maps.event.addListener(pinA, 'click', function () {
                    infowindow.setContent("<b>Route Start Address = </b>" + route.legs[0].start_address + " <br/>" + route.legs[0].start_location);
                    infowindow.open(map, this);
                });
                google.maps.event.addListener(pinB, 'click', function () {
                    debugger;
                    infowindow.setContent("<b>Route End Address = </b>" + route.legs[0].end_address + " <br/><b>Distance=</b> " + computeTotalDistance(directionsDisplay.getDirections()) + " Km <br/><b>Travel time=</b> " + computeTotalDuration(directionsDisplay.getDirections()) + " <br/> " + route.legs[0].end_location);
                    infowindow.open(map, this);
                });

            } else {
                window.alert('Directions request failed due to ' + status);
            }
            directionsDisplay.setDirections(response);
        });
    }

关于Google Map获取方向服务V3的问题

1 个答案: