我希望当用户单击标记时计算并显示路线，路线显示在单独的面板中，但路线线不会显示在 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/ (完整的代码，因为它不允许我在这里发布完整的代码)
它应该是什么样子:
现在的样子:
最佳答案
我在您的 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
关于javascript - Google map API 不显示计算路线上的线路，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59569483/