Drukowana wersja tematu

Napisany przez: john_doe 23.05.2020, 08:19:13

Hej, uzywam google do wyznaczenia odleglosci.

[HTML] pobierz, plaintext 
 
function calculateDistance(origin, destination) {
            var service = new google.maps.DistanceMatrixService();
            service.getDistanceMatrix(
                {
                    origins: [origin],
                    destinations: [destination],
                    travelMode: google.maps.TravelMode.DRIVING,
                    unitSystem: google.maps.UnitSystem.METRIC,
                    avoidHighways: false,
                    avoidTolls: false
                }, callback
            );
        }
 
        function callback(response, status) {
            if (status != google.maps.DistanceMatrixStatus.OK) {
                console.log(err);
            } else {
                var origin = response.originAddresses[0];
                var destination = response.destinationAddresses[0];
                if (response.rows[0].elements[0].status === "ZERO_RESULTS") {
                    console.log("nie ma drog pomiedzy"
                        + origin + " and " + destination);
                } else {
                    var distance = response.rows[0].elements[0].distance;
                    var distance_value = distance.value; // w metrach
                    var distance_text = distance.text;   // np. 2,4 km
                    var distanceKm = distance_text.substring(0, distance_text.length - 3);
                    console.log("Odległość: " + distance_text + " lub " + distance_value/1000 + " lub " + distanceKm);
                }
            }
        }
 
[HTML] pobierz, plaintext 

Napisany przez: viking 23.05.2020, 08:41:09

Poczytaj o await i promise.

Napisany przez: miccom 23.05.2020, 09:09:14

Ja u mnie wykorzystuję taki kod, wywołuję tak:

[HTML] pobierz, plaintext 
<http://december.com/html/4/element/div.html id="inputs">
			<http://december.com/html/4/element/form.html action="" onsubmit="initMap(); return false;">
				<http://december.com/html/4/element/input.html type="text" id="adres" placeholder="( np. warszawa, puławska 19 ) "/><http://december.com/html/4/element/br.html>
				<http://december.com/html/4/element/input.html type="submit" value="Oblicz odległosć" /> <http://december.com/html/4/element/br.html><http://december.com/html/4/element/br.html> 
			</http://december.com/html/4/element/form.html>
      </http://december.com/html/4/element/div.html>
<http://december.com/html/4/element/div.html id="output"></http://december.com/html/4/element/div.html>
    </http://december.com/html/4/element/div.html>
    <http://december.com/html/4/element/div.html id="map"></http://december.com/html/4/element/div.html>
<http://december.com/html/4/element/script.html>
	function initMap() {
        var bounds = new google.maps.LatLngBounds;
        var markersArray = [];
        var origin = 'Główna 31, Tychy';// tutaj musisz podać swój adres jeśli potrzebujesz do wyświetlenia
		if(document.getElementById("adres").value == ''){
			var destination = 'Główna 31, Tychy';
			alert('musisz podać adres docelowy');
			exit();
		}else{
			var destination = document.getElementById("adres").value;
		};
        var destinationIcon = 'https://www.google.com/intl/en_ALL/mapfiles/dd-end.png';
		var destinationTitle = 'A tutaj się zatrzymujemy!';
        var originIcon = 'https://www.google.com/intl/en_ALL/mapfiles/dd-start.png';
		var originTitle = 'Stąd wyruszamy :)';
		$('#map').css('width','400px').css('height', '400px');
        var map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: 50.108138, lng: 19.0400068}, // tutaj pokazujesz mapkę na której google rozrysuje trasę
          zoom: 12
        });
        var geocoder = new google.maps.Geocoder;
        var service = new google.maps.DistanceMatrixService;
        service.getDistanceMatrix({
          origins: [origin],
          destinations: [destination],
          travelMode: google.maps.TravelMode.DRIVING,
          unitSystem: google.maps.UnitSystem.METRIC,
          avoidHighways: true,
          avoidTolls: true
        }, function(response, status) {
          if (status !== google.maps.DistanceMatrixStatus.OK) {
            alert('Error was: ' + status);
          } else {
            var originList = response.originAddresses;
            var destinationList = response.destinationAddresses;
            var outputDiv = document.getElementById('output');
            outputDiv.innerHTML = '';
            deleteMarkers(markersArray);
 
            var showGeocodedAddressOnMap = function(asDestination) {
              var icon = asDestination ? destinationIcon : originIcon;
			   var title = asDestination ? destinationTitle : originTitle;
              return function(results, status) {
                if (status === google.maps.GeocoderStatus.OK) {
                  map.fitBounds(bounds.extend(results[0].geometry.location));
                  markersArray.push(new google.maps.Marker({
                    map: map,
                    position: results[0].geometry.location,
                    icon: icon,
					title : title
 
                  }));
                } else {
					if( status === 'ZERO_RESULTS' && document.getElementById("adres").value!= '' ){
						alert('Geolokalizator nie potrafi odnaleźć wpisanej miejscowości :( <br> Wpisz poprawną miejscowość');
					}
                }
              };
            };
 
            for (var i = 0; i < originList.length; i++) {
              var results = response.rows[i].elements;
              geocoder.geocode({'address': originList[i]},
                  showGeocodedAddressOnMap(false));
              for (var j = 0; j < results.length; j++) {
                geocoder.geocode({'address': destinationList[j]},
                    showGeocodedAddressOnMap(true));
					outputDiv.innerHTML += 'odległość:  ' + results[j].distance.text;
					$('#stronger').remove();
				}
			}
            }
          }
        });
	}
 
	function deleteMarkers(markersArray) {
		for (var i = 0; i < markersArray.length; i++) {
			markersArray[i].setMap(null);
		}
		markersArray = [];
	}
    </http://december.com/html/4/element/script.html>
    <http://december.com/html/4/element/script.html async defer
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB3xxTXcVYShuoufkT1tV6L55C0_K0tMzw"><!-- tutaj musisz dać swój klucz API -->
    </http://december.com/html/4/element/script.html>
[HTML] pobierz, plaintext 

Napisany przez: john_doe 24.05.2020, 11:10:21

@miccom może nie podawaj swojego klucza.

@viking dzięki.

napisałem coś co działa ale ... gdyby ktoś zaproponował inną wersję, inne wywołanie może, brakuje pewnie w sumie try/catch