Question

如果谷歌地图中有多个点，有人知道如何使用calcRoute（）函数吗？

目前，我有网络应用程序（asp.net）可以搜索城市并将其存储在列表框中。此时，我想连接我在listBox中存储的所有点。根据{{3}}中的教程，我必须使用函数calcRoute（）。因此，在javascript中。我intiliaze directionsDisplay.setMap（map）;

 function initialize() {


        var pyrmont = new google.maps.LatLng(-33.8665433, 151.1956316);

        //route
        directionsDisplay = new google.maps.DirectionsRenderer();

        map = new google.maps.Map(document.getElementById('map-canvas'), {
            center: pyrmont,
            zoom: 15

        });

        //city autocomplete 
        var input = document.getElementById('tbCity');
        var options = {
            types: ['(cities)']
        };

        //create markerCity objects
        var defaultCityMarker = new google.maps.Marker({
            map: map
        });


        autocomplete = new google.maps.places.Autocomplete(input, options);

        google.maps.event.addListener(autocomplete, 'place_changed', function () {
            var place = autocomplete.getPlace();
            if (!place.geometry) {
                return;
            }

            // If the place has a geometry, then present it on a map.
            if (place.geometry.viewport) {
                map.fitBounds(place.geometry.viewport);
            } else {
                map.setCenter(place.geometry.location);
                map.setZoom(15);
            }
            //defaultCityMarker.setIcon(yellowMarker);
            defaultCityMarker.setIcon(/** @type {google.maps.Icon} */({
                url: place.icon,
                size: new google.maps.Size(71, 71),
                origin: new google.maps.Point(0, 0),
                anchor: new google.maps.Point(17, 34),
                scaledSize: new google.maps.Size(35, 35)
            }));
            defaultCityMarker.setPosition(place.geometry.location);
            defaultCityMarker.setVisible(true);
        });

        placesList = document.getElementById('POIcontainer');

        // Create the search box and link it to the UI element.
        var POIinput = (document.getElementById('tbSearch'));
        var searchBox = new google.maps.places.SearchBox((POIinput));

        var searchButton = document.getElementById('btnSearch');
        google.maps.event.addDomListener(searchButton, 'click', function () {
            var poiKeyword = document.getElementById('tbSearch').value;
            getListOfPOI(poiKeyword);
        });


    }

我已经宣布了calcRoute：

 function calcRoute() {

        var start = document.getElementById('start').value;
        var waypts = [];
        var end = document.getElementById('end').value;
        var waypoints = []; // init an empty waypoints array
        //check list from listbox(?)

        for (var i = 0; i < ListBox2.length; i++) {
            start.push({
                location: ListBox2[0].value,
                stopover: true
            });
            waypts.push({
                location: ListBox2[i].value,
                stopover: true
            });

            end.push({
                location: ListBox2[ListBox2.length-1].value,
                stopover: true
            });
        }

        var request = {
            origin: start,
            destination: end,
            waypoints: waypts,
            optimizeWaypoints: true,
            travelMode: google.maps.DirectionsTravelMode.DRIVING
        };
        directionsService.route(request, function (response, status) {
            if (status == google.maps.DirectionsStatus.OK) {
                directionsDisplay.setDirections(response);
                var route = response.routes[0];
            }
        });
    }

在这个函数中，我取了点（这是listBox2的项目）并初始化for语句中的start，waypoint和end。不幸的是，它似乎没有用。有谁知道如何使用calcroute？谢谢

Answer 1

一个问题是创建了路由的DirectionRenderer

directionsDisplay = new google.maps.DirectionsRenderer();

但未指定地图将在哪个方向呈现：

directionsDisplay = new google.maps.DirectionsRenderer();
directionsDisplay.setMap(map);

在createRoute()开始和结束点中创建：

    var start = document.getElementById('start').value;
    var waypts = [];
    var end = document.getElementById('end').value;

然后用作数组并填充为循环中的航点：

    for (var i = 0; i < ListBox2.length; i++) {
        start.push({
            location: ListBox2[0].value,
            stopover: true
        });
        waypts.push({
            location: ListBox2[i].value,
            stopover: true
        });

        end.push({
            location: ListBox2[ListBox2.length-1].value,
            stopover: true
        });
    }

如果ListBox2有10个元素，start和end最后会有10个元素。因此，目前尚不清楚这两点的来源是什么。

见example at jsbin。 start和end是硬编码的，航点从伪造的ListBox2填充（0和最后一个索引被跳过）。

如何使用calcRoute（）

1 个答案: