javascript - Google map API 不显示计算路线上的线路

Question

我希望当用户单击标记时计算并显示路线，路线显示在单独的面板中，但路线线不会显示在 map 上。我在 jsfiddle 上的代码:

  var sidenav = new Sidenav("sidenav");
document.getElementById("sidenav").addEventListener("click", function () {
    sidenav.openClose();
})

/**
 * Sidenav
 */
function Sidenav(ob) {
    var navId = (ob !== null && typeof ob === 'object') ? ob.id : ob;
    var opt = ob || {};

    this.isOpen = opt.isOpen || false;
    this.sidenav = document.getElementById(navId);
}

// True is open, false is close and no option is toggle
Sidenav.prototype.openClose = function (open) {
    var self = this;

    self.isOpen = open || !self.isOpen;
    if (self.isOpen) {
        self.sidenav.classList.add("open");
    } else {
        self.sidenav.classList.remove("open");
    }
}</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=places&callback=initMap" async defer></script>

<script>

    google.maps.visualRefresh = true;
    var slider, infowindow = null;
    var bounds = new google.maps.LatLngBounds();
    var map, current = 0;

    var locations =[
        {"title":"Antoniuskapel","lat":51.09744,"lng":5.8877,"image":'http://www.placehold.it/100x100'},{"title":"Mariakapel","lat":51.097124,"lng":5.887302,"image":'http://www.placehold.it/100x100'},{"title":"Lourdesgrot","lat":51.05297,"lng":5.956812,"image":'http://www.placehold.it/100x100'},{"title":"kruis","lat":51.05198,"lng":5.9579,"image":'http://www.placehold.it/100x100'},{"title":"Wegkruis","lat":51.08577,"lng":5.8862,"image":'http://www.placehold.it/100x100'},{"title":"St. Joriskapel","lat":51.162068,"lng":5.881558,"image":'http://www.placehold.it/100x100'},{"title":"Wegkruis","lat":51.1773,"lng":5.89992,"image":'http://www.placehold.it/100x100'},{"title":"Wegkruis","lat":51.18133,"lng":5.89565,"image":'http://www.placehold.it/100x100'},{"title":"Kruis","lat":51.15993,"lng":5.87984,"image":'http://www.placehold.it/100x100'},{"title":"niskapel","lat":51.20699,"lng":5.85444,"image":'http://www.placehold.it/100x100'},{"title":"Wegkruis","lat":51.241443,"lng":5.960133,"image":'http://www.placehold.it/100x100'},{"title":"St Annakapel","lat":51.19158,"lng":5.92023,"image":'http://www.placehold.it/100x100'},{"title":"St Jozefkapel","lat":51.16883,"lng":5.85309,"image":'http://www.placehold.it/100x100'},{"title":"Lourdesgrot","lat":50.90122,"lng":5.742296,"image":'http://www.placehold.it/100x100'},{"title":"gedenkkruis","lat":50.99512,"lng":5.87538,"image":'http://www.placehold.it/100x100'},{"title":"Kapel O.L.Vrouw, koningin van het huisgezin","lat":51.15709,"lng":5.94351,"image":'http://www.placehold.it/100x100'},{"title":"Ritakapel","lat":51.60511,"lng":6.04625,"image":'http://www.placehold.it/100x100'},{"title":"Engelbewaarkruis","lat":51.1496,"lng":6.0208,"image":'http://www.placehold.it/100x100'},{"title":"Kapel Bosserhof","lat":51.13123,"lng":5.87811,"image":'http://www.placehold.it/100x100'},{"title":"gedenkkruis","lat":50.91829,"lng":5.84951,"image":'http://www.placehold.it/100x100'},{"title":"Mariakapel","lat":51.00956,"lng":5.84883,"image":'http://www.placehold.it/100x100'},{"title":"Wegkruis","lat":51.4915,"lng":6.04096,"image":'http://www.placehold.it/100x100'},{"title":"Mariakapel","lat":51.53157,"lng":5.97199,"image":'http://www.placehold.it/100x100'},{"title":"Wegkruis","lat":51.50193,"lng":5.946,"image":'http://www.placehold.it/100x100'},{"title":"Mariakapel","lat":51.35901,"lng":6.04936,"image":'http://www.placehold.it/100x100'},{"title":"wegkruis","lat":51.28559,"lng":5.93517,"image":'http://www.placehold.it/100x100'},{"title":"wegkruis","lat":50.93835,"lng":5.99046,"image":'http://www.placehold.it/100x100'},{"title":"veldkruis","lat":50.85073,"lng":5.97319,"image":'http://www.placehold.it/100x100'},{"title":"Lourdesgrot","lat":50.83283,"lng":5.99278,"image":'http://www.placehold.it/100x100'},{"title":"boomkruis","lat":50.85405,"lng":5.93908,"image":'http://www.placehold.it/100x100'},{"title":"wegkruis","lat":50.84606,"lng":5.95485,"image":'http://www.placehold.it/100x100'},{"title":"wegkruis","lat":5094597,"lng":595642,"image":'http://www.placehold.it/100x100'},{"title":"wegkruis","lat":51.22948,"lng":5.97028,"image":'http://www.placehold.it/100x100'},{"title":"Wegkruis","lat":51.41794,"lng":6.14678,"image":'http://www.placehold.it/100x100'},{"title":"Mariakapel","lat":51.41416,"lng":6.13566,"image":'http://www.placehold.it/100x100'},{"title":"gedenkkruis","lat":51.49694,"lng":6.08824,"image":'http://www.placehold.it/100x100'},{"title":"Barbarakapel","lat":51.28467,"lng":6.09245,"image":'http://www.placehold.it/100x100'},{"title":"kruis","lat":50.92363,"lng":5.90061,"image":'http://www.placehold.it/100x100'},{"title":"kruis (behoort niet tot doelgroep","lat":50.92962,"lng":5.90248,"image":'http://www.placehold.it/100x100'},{"title":"wegkruis","lat":50.93016,"lng":5.90351,"image":'http://www.placehold.it/100x100'},{"title":"wegkruis","lat":50.93015,"lng":5.90121,"image":'http://www.placehold.it/100x100'},{"title":"Kruis","lat":50.91981,"lng":5.9257,"image":'http://www.placehold.it/100x100'},{"title":"Gedenkkruis","lat":50.8666,"lng":5.78319,"image":'http://www.placehold.it/100x100'},{"title":"wegkruis","lat":50.87153,"lng":5.83983,"image":'http://www.placehold.it/100x100'},{"title":"wegkruis","lat":50.81678,"lng":5.94794,"image":'http://www.placehold.it/100x100'},{"title":"wegkruis","lat":50.76992,"lng":5.92589,"image":'http://www.placehold.it/100x100'},{"title":"Gevelkruis","lat":50.78393,"lng":5.91619,"image":'http://www.placehold.it/100x100'},{"title":"Veldkruis","lat":50.78108,"lng":5.91208,"image":'http://www.placehold.it/100x100'},{"title":"kruis","lat":50.79495,"lng":5.91981,"image":'http://www.placehold.it/100x100'},{"title":"wegkruis","lat":50.88094,"lng":5.87703,"image":'http://www.placehold.it/100x100'},{"title":"gevelkruis","lat":50.89451,"lng":6.05848,"image":'http://www.placehold.it/100x100'},{"title":"wegkruis","lat":50.92245,"lng":5.83815,"image":'http://www.placehold.it/100x100'},{"title":"gevelkruis","lat":50.83376,"lng":5.89395,"image":'http://www.placehold.it/100x100'},{"title":"wegkruis","lat":50.83469,"lng":5.8972,"image":'http://www.placehold.it/100x100'},{"title":"wegkruis","lat":50.9228,"lng":5.81792,"image":'http://www.placehold.it/100x100'},{"title":"jozefkapel","lat":51.24224,"lng":5.96779,"image":'http://www.placehold.it/100x100'},{"title":"Drie Gezusterskapel","lat":51.23241,"lng":5.7785,"image":'http://www.placehold.it/100x100'},{"title":"St. Servatiuskapel","lat":181777,"lng":360270,"image":'http://www.placehold.it/100x100'},{"title":"Heinkenskruus","lat":182114,"lng":359790,"image":'http://www.placehold.it/100x100'},{"title":"Meiekruus","lat":51.21091,"lng":5.71717,"image":'http://www.placehold.it/100x100'},{"title":"Princenkruus","lat":181719,"lng":360536,"image":'http://www.placehold.it/100x100'},{"title":"t Staoperskruus","lat":51.20755,"lng":5.72518,"image":'http://www.placehold.it/100x100'},{"title":"Kruis van Coolen","lat":51.1635,"lng":5.8678,"image":'http://www.placehold.it/100x100'},{"title":"Kiggenkruus","lat":51.21906,"lng":5.7207,"image":'http://www.placehold.it/100x100'},{"title":"Pelmersheidekruus","lat":51.21615,"lng":5.75467,"image":'http://www.placehold.it/100x100'},{"title":"Steinenkruus","lat":51.21559,"lng":5.7154,"image":'http://www.placehold.it/100x100'},{"title":"Hagelkruis","lat":51.26898,"lng":5.75076,"image":'http://www.placehold.it/100x100'},{"title":"Groelskapel","lat":51.18711,"lng":5.815113,"image":'http://www.placehold.it/100x100'},{"title":"kruis","lat":51.42731,"lng":5.95435,"image":'http://www.placehold.it/100x100'},{"title":"Wegkruis","lat":51.33947,"lng":5.88563,"image":'http://www.placehold.it/100x100'},{"title":"Kapel Eind-Hulsen","lat":51.27917,"lng":5.77163,"image":'http://www.placehold.it/100x100'},{"title":"Hagelkruis","lat":51.27692,"lng":5.77735,"image":'http://www.placehold.it/100x100'},{"title":"Oorlogs-memoriekruis","lat":51.30992,"lng":5.68912,"image":'http://www.placehold.it/100x100'},{"title":"Veldkruis","lat":51.28555,"lng":5.74092,"image":'http://www.placehold.it/100x100'},{"title":"Antoniuskapel","lat":51.28932,"lng":5.72862,"image":'http://www.placehold.it/100x100'},{"title":"Grenskerkmonument","lat":51.30585,"lng":5.6619,"image":'http://www.placehold.it/100x100'},{"title":"Smeetskruus","lat":51.29987,"lng":5.66391,"image":'http://www.placehold.it/100x100'},{"title":"Veldkruiskapel","lat":51.28578,"lng":5.76933,"image":'http://www.placehold.it/100x100'},{"title":"St. Jozefkapel","lat":51.2861,"lng":5.75262,"image":'http://www.placehold.it/100x100'},{"title":"Memoriekruis mei 1940","lat":51.26938,"lng":5.77569,"image":'http://www.placehold.it/100x100'},{"title":"Memoriekruiskapel","lat":51.27305,"lng":5.75984,"image":'http://www.placehold.it/100x100'},{"title":"Veldkruis","lat":51.27892,"lng":5.78224,"image":'http://www.placehold.it/100x100'},{"title":"Millenniumkruis","lat":51.28974,"lng":5.7816,"image":'http://www.placehold.it/100x100'},{"title":"Bedevaartskruis","lat":51.28606,"lng":5.7488,"image":'http://www.placehold.it/100x100'},{"title":"Ongelukskruis","lat":51.28251,"lng":5.75515,"image":'http://www.placehold.it/100x100'},{"title":"Oorlogsmemoriekruis","lat":51.28709,"lng":5.71964,"image":'http://www.placehold.it/100x100'},{"title":"Hagelkruis","lat":51.3054,"lng":5.7905,"image":'http://www.placehold.it/100x100'},{"title":"Veldkruis oorlogsmemorie","lat":51.29611,"lng":5.79783,"image":'http://www.placehold.it/100x100'},{"title":"Kapel O.L.Vrouw van Rust","lat":51.24155,"lng":5.79484,"image":'http://www.placehold.it/100x100'},{"title":"Kapel van Altijd durende bijstand","lat":51.29345,"lng":5.77035,"image":'http://www.placehold.it/100x100'},{"title":"Oorlogsmemoriekruis","lat":51.30375,"lng":5.77166,"image":'http://www.placehold.it/100x100'},{"title":"Mariakapel","lat":51.30082,"lng":5.71964,"image":'http://www.placehold.it/100x100'},{"title":"Veld-ongelukskruis","lat":51.31963,"lng":5.77911,"image":'http://www.placehold.it/100x100'},{"title":"Kapel uit dankbaarheid genezing","lat":51.31027,"lng":5.8018,"image":'http://www.placehold.it/100x100'},{"title":"Veldkruis oorlogsmemorie","lat":51.32822,"lng":5.82809,"image":'http://www.placehold.it/100x100'},{"title":"Veldkruis oorlogsmemorie","lat":51.26433,"lng":5.83124,"image":'http://www.placehold.it/100x100'}
        ];



    function show() {
        infowindow.close();
        if (!map.slide) {
            return;
        }
        var next, marker;
        if (locations.length == 0 ) {
            return
        } else if (locations.length == 1 ) {
            next = 0;
        }
        if (locations.length >1) {
            do {
                next = Math.floor (Math.random()*locations.length);
            } while (next == current)
        }
        current = next;
        marker = locations[next];
        setInfo(marker);
        infowindow.open(map, marker);
        if (locations.length>1) {
            slider = window.setTimeout(show, 6000);
        }
    }

    function initialize() {
        clicked = null;
        directionsService = new google.maps.DirectionsService;
        var poly = new google.maps.Polyline({ map: map, strokeColor: '#235c23' });
        var path = new google.maps.MVCArray();
        directionsDisplay = new google.maps.DirectionsRenderer({
            suppressBicyclingLayer: true
        });
        directionsDisplay.setMap(map);
        directionsDisplay.setPanel(document.getElementById("directionsPanel"));

        var latlng = new google.maps.LatLng(51.097124, 5.887302);
        var bounds = new google.maps.LatLngBounds();
        var mapOptions = {
            zoom: 10,
            center: latlng,
            mapTypeId: 'my_type'
        };
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(function (position) {
                window.pos = {
                    lat: position.coords.latitude,
                    lng: position.coords.longitude
                };
                map.setCenter(pos);
                infoWindow = new google.maps.InfoWindow({map: map});
                infoWindow.setPosition(pos);
                infoWindow.setContent('Jouw locatie!');
            }, function () {
                handleLocationError(true,infoWindow,map.getCenter());
            });
        } else {
            handleLocationError(false,infoWindow, map.getCenter());
        }
        map = new google.maps.Map(document.getElementById('map'), mapOptions);
        ;

        var styledMapOptions = {};
        var customMapType = new google.maps.StyledMapType( styledMapOptions);
        map.mapTypes.set('my_type', customMapType);
        setMarkers(map, locations);
        infowindow = new google.maps.InfoWindow({
            content: "loading..."
        });
        google.maps.event.addListener(infowindow, 'closeclick',function(){
            infowindow.close();
        });
    }

https://jsfiddle.net/0u6f4gtr/ (完整的代码，因为它不允许我在这里发布完整的代码)它应该是什么样子:

现在的样子:

Answer 1

我在您的 jsfiddle 中收到错误: initMap 不是一个函数，因为 API 包括:

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=places&callback=initMap" async defer></script>

您在 map 上看不到路线路线，因为当您调用 directionsDisplay.setMap(map); 时，您是在 map 初始化之前执行此操作的。

将该调用移至map初始化之后，您将在 map 上看到路线。

updated fiddle (with a marker in Los Angeles)

function initialize() {
    clicked = null;
    directionsService = new google.maps.DirectionsService;
    var poly = new google.maps.Polyline({ map: map, strokeColor: '#235c23' });
    var path = new google.maps.MVCArray();
    directionsDisplay = new google.maps.DirectionsRenderer({
        suppressBicyclingLayer: true
    });

    directionsDisplay.setPanel(document.getElementById("directionsPanel"));

    var latlng = new google.maps.LatLng(51.097124, 5.887302);
    var bounds = new google.maps.LatLngBounds();
    var mapOptions = {
        zoom: 10,
        center: latlng,
        mapTypeId: 'my_type'
    };
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function (position) {
            window.pos = {
                lat: position.coords.latitude,
                lng: position.coords.longitude
            };
            map.setCenter(pos);
            infoWindow = new google.maps.InfoWindow({map: map});
            infoWindow.setPosition(pos);
            infoWindow.setContent('Jouw locatie!');
        }, function () {
            handleLocationError(true,infoWindow,map.getCenter());
        });
    } else {
        handleLocationError(false,infoWindow, map.getCenter());
    }
    map = new google.maps.Map(document.getElementById('map'), mapOptions);
    directionsDisplay.setMap(map); // <=================================== here