• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

google maps api rysowanie trasy, jako start geolokacja, jako end statyczny marker na mapie

VPS Starter Arubacloud
+1 głos
286 wizyt
pytanie zadane 1 grudnia 2016 w JavaScript przez TBO Użytkownik (790 p.)

Cześć,

Robie projekt w którym przegladarka pyta sie o twoja obecna lokalizacje i na jej podstawie rysuje na mapie droge do markera dodanego na mapie. Mam problem z rysowaniem, uzywam google maps api

Oto kod:
 

<div id="map"></div>
<script>

    function initMap() {
        var directionsService = new google.maps.DirectionsService;
        var directionsDisplay = new google.maps.DirectionsRenderer;

        var map = new google.maps.Map(document.getElementById('map'), {
            center: { lat: 52.4128900, lng: 17.0850300 },
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            zoom: 15
        });
        directionsDisplay.setMap(map);

        // przystanki
        var marker = new google.maps.Marker({
            position: { lat: 52.4128900, lng: 17.0850300 },
            map: map,
            title: 'Przystanek nr1'
        });
        var marker2 = new google.maps.Marker({
            position: { lat: 52.406102, lng: 17.074135 },
            map: map,
            title: 'Przystanek nr2'
        });
        var infoWindow = new google.maps.InfoWindow({ map: map });
      
        // Try HTML5 geolocation.
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(function (position) {
                var pos = {
                    lat: position.coords.latitude,
                    lng: position.coords.longitude
                };

                infoWindow.setPosition(pos);
                infoWindow.setContent('Tutaj jesteś');
                map.setCenter(pos);
            }, function () {
                handleLocationError(true, infoWindow, map.getCenter());
            });
        } else {
            // Browser doesn't support Geolocation
            handleLocationError(false, infoWindow, map.getCenter());
        }

        function handleLocationError(browserHasGeolocation, infoWindow, pos) {
            infoWindow.setPosition(pos);
            infoWindow.setContent(browserHasGeolocation ?
                                  'Error: The Geolocation service failed.' :
                                  'Error: Your browser doesn\'t support geolocation.');

            var onChangeHandler = function () {
                calculateAndDisplayRoute(directionsService, directionsDisplay, position, marker);
            };
            document.getElementById('position');
            document.getElementById('marker');

        }
    }
    function calculateAndDisplayRoute(directionsService, directionsDisplay, position, marker) {
        directionsService.route({
            origin: document.getElementById('position').value,
            destination: document.getElementById('marker').value,
            travelMode: 'WALKING'
        }, function (response, status) {
            if (status === 'OK') {
                directionsDisplay.setDirections(response);
            } else {
                window.alert('Directions request failed due to ' + status);
            }
        });

    }

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



Ktoś może mi pomóc ?

Zaloguj lub zarejestruj się, aby odpowiedzieć na to pytanie.

Podobne pytania

0 głosów
0 odpowiedzi 1,231 wizyt
pytanie zadane 2 lipca 2019 w JavaScript przez cyrus33 Użytkownik (680 p.)
0 głosów
1 odpowiedź 372 wizyt
pytanie zadane 17 grudnia 2017 w JavaScript przez chmod96 Obywatel (1,380 p.)
0 głosów
1 odpowiedź 1,032 wizyt
pytanie zadane 18 kwietnia 2017 w JavaScript przez Q_Nick Mądrala (5,010 p.)

92,452 zapytań

141,262 odpowiedzi

319,077 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...