2016-04-04 3 views
0

Мне нужно простое приложение, которое создает разные маршруты из разных точек. Я не получаю никаких ошибок в консоли и не знаю, что происходит.Google Maps - Различные маршруты из разных точек

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>AAASASASD</title> 
<style> 
    #map { 
    width: 500px; 
    height: 400px; 
    } 
</style> 
</head> 
<body> 
<h2 style="text-align: center;">Maps 1</h2> 
<select id="localizacion"> 
    <option value="28.123546, -15.436257">Localización 1</option> 
    <option value="28.05, -15.44"> Localizacion 2</option> 
</select> 
<select id="modo"> 
    <option value="WALKING">Caminando</option> 
    <option value="DRIVING">Coche</option> 
    <option value="TRANSIT">Guagua</option> 
    <option value="BICYCLING">Bicicleta</option> 
</select> 
<div id="map"></div> 
<script> 
    function initMap() { 
    var directionsService = new google.maps.DirectionsService; 
    var directionsDisplay = new google.maps.DirectionsRenderer; 
    var mapDiv = document.getElementById('map'); 
    var map = new google.maps.Map(mapDiv, { 
     center: {lat: 28.099261, lng: -15.419831}, 
     zoom: 15 
    }); 

    var onChangeHandler = function() { 
     calculateAndDisplayRoute(directionsService, directionsDisplay); 
    }; 
    document.getElementById('localizacion').addEventListener('change', onChangeHandler); 
    document.getElementById('modo').addEventListener('change', onChangeHandler); 
    } 

    function calculateAndDisplayRoute(directionsService, directionsDisplay) { 
    var o = document.getElementById('localizacion').value; 
    var d = "28.099261, -15.419831"; 
    modo = document.getElementById('modo').value; 
    a={origin:o,destination:d,travelMode:google.maps.TravelMode[modo]}; 
    directionsService.route((a,function(a,status){ 
     if (status === google.maps.DirectionsStatus.OK) { 
     directionsDisplay.setDirections(a); 
     } 
    })); 
    } 



</script> 



<script src="https://maps.googleapis.com/maps/api/js?key=FAKEKEY&callback=initMap" 
    async defer></script> 
</body> 
</html> 

Что не так? Теоретически, я вычисляю маршрут от точки до моего местоположения, но ничего не показывает.

ответ

0

2 вещи:

1: слишком много скобок. замените на это:

2: directionsDisplay не знает, где разместить результаты. положите эту строку:

directionsDisplay.setMap(map); 

после того как вы инициализируете карту.

+0

thankyou mate! оно работает! – Nauzet

Смежные вопросы