Witam serdecznie.
Otóż jestem początkującym programistą w trakcie nauki. W chwili obecnej bawię się geolokalizacją ale nie do końca mi wychodzi. Napisałem prosty skrypt, który przedstawia moją długość i szerokość geograficzną, a także mierzy odległość od mojej lokalizacji do głównej siedziby Helionu (uczę się przy pomocy książki tegoż wydawnictwa).
Nie mniej jednak w dalszych częściach książki to zadanie się rozwija o przedstawienie mapy ale niestety pomimo dobrze opisanej zasady działania moja mapa się nie pokazuje i nie wyświetlają się żadne błędy i nie wiem co dalej z tym zrobić. Wiem że temat był już poruszany ale niestety nie pomógł mi zbytnio.
Poniżej przedstawiam mój kod w JavaSctript, który powinien działać, a nie działa :(
Proszę o pomoc
window.onload = getMyLocation;
//Funkcja która pyta użytkownika o pozwolenie na włączenie lokalizacji
function getMyLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(displayLocation, displayError);
} else {
alert("Oj! Brak wspracia dla geolokalizacji.");
}
}
//Funkcja która wyświetla błędy podczas próby lokalizowania
function displayError(error) {
var errorTypes = {
0: "Nieznany błąd",
1: "Dostęp zabroniony przez użytkownika",
2: "Położenie jest niedostępne",
3: "Zbyt długi czas oczekiwania"
};
var errorMessage = errorTypes[error.code];
if (error.code === 0 || error.code === 2) {
errorMessage = errorMessage + "" + error.message;
}
var div = document.getElementById("location");
div.innerHTML = errorMessage;
}
//Określam długość i szerokość geograficzną siedziby HELIONU
var ourCoords = {
latitude: 50.288962, //szerokość geograficzna
longitude: 18.659609 //długość geograficzna
};
//Funkcja obliczająca odległość między punketam A i punktem B (w tym przypadku odległość między mną, a siedzibą HELIONU)
//startCoords - jest to punkt startowy
//destCoords - jest to punkt ko�cowy
function computeDistance(startCoords, destCoords) {
var startLatRads = degreesToRadians(startCoords.latitude);
var startLongRads = degreesToRadians(startCoords.longitude);
var destLatRads = degreesToRadians(destCoords.latitude);
var destLongRads = degreesToRadians(destCoords.longitude);
var Radius = 6371; //Promień Ziemi w kilometrach
var distance = Math.acos(Math.sin(startLatRads) * Math.sin(destLatRads) +
Math.cos(startLatRads) * Math.cos(destLatRads) *
Math.cos(startLongRads - destLongRads)) * Radius;
return distance;
}
function degreesToRadians(degrees) {
var radians = (degrees * Math.PI) / 180;
return radians;
}
//Tutaj zaczyna się tworzenie mapy
var map;
var google;
function showMap(coords) {
var googleLatAndLong = new google.maps.LatLng(coords.latitude, coords.longitude); // przekazuje dlugość i szerokość geograficzną do google maps
var mapOptions = {
zoom: 10, // ustawiam zoom mapy
center: googleLatAndLong, // wyśrodkowanie mapy w mojej okolicy
mapTypeId: google.maps.MapTypeId.ROADMAP //ustawiam typ mapy w tym przypadku mapa drogowa (można skorzystać także z: SATELLITE i HYBRID)
};
var mapDiv = document.getElementById("map");
map = new google.maps.Map(mapDiv, mapOptions);
}
//Funkcja określająca naszą pozycję
function displayLocation(position) {
var latitude = position.coords.latitude;//szerokość geograficzna
var longitude = position.coords.longitude;//długość geograficzna
//moja lokalizacja
var div = document.getElementById("location");
div.innerHTML = "Jesteś na szerokości " + latitude + " i długości " + longitude;
//Dystans do HELIONU
var km = computeDistance(position.coords, ourCoords);
var distance = document.getElementById("distance");
distance.innerHTML = "Jesteś " + km + " km od siedziby Helionu";
showMap(position.coords);
}
Tak wygląda mój kod w HTML5 który startuje moją stronkę:
<!DOCTYPE html>
<html>
<head>
<title>Siedziba helion - lokalizacja</title>
<script src="lokalizator.js"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAcM8lRS03fxef7FnItePwFbeAZtmnSAyY"></script>
</head>
<body>
<div id="location">
<!--Tu znajudje się moja lokalizacja -->
</div>
<div id="distance">
<!--Tu znajduje się odległość od siedziby Helionu-->
</div>
<div id="map">
<!--Tutaj znajduje się mapa-->
</div>
</body>
</html>