Как определить месторасположение через javascript
Тэги: javascript полезные скрипты javascript API Geolocation
📅1-05-2018 👁407
Вставьте в html документ следующий js скрипт для определения координат локации (широты и долготы в десятичных значениях):
getloc();
function getloc(){
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(
positionCallback, function (error){
console.log ("Error : " + error.code + " " + error.message);
}
);
}else{
console.log ("location is disabled");
}
}
function positionCallback(pos){
console.log (pos.coords.latitude);
console.log (pos.coords.longitude);
console.log (pos.coords.accuracy); // точность месторасположения в метрах
}
Браузер получает локацию своими внутренними методами используя API Geolocation, лиса например использует для этого запрос POST www.googleapis.com/geolocation/v1/geolocate?key=AIzaSyD_Drzahe4dBzGCZ9ArvowCvrPx_yFrlCM HTTP/1.1
Другие браузеры используют свои ключи, которые получены у гугл.
Как показать месторасположение на карте
Для этого нужно получить ключ API в гугле
https://console.developers.google.com/flow/enableapi?apiid=maps_backend,geocoding_backend,directions_backend,distance_matrix_backend,elevation_backend,places_backend&reusekey=true
В head нужно добавить
<script src="https://maps.googleapis.com/maps/api/js?key=Your_API_key"></script>
На странице определить место, где будет выводится карта:
<div id="map" style=" width:600px; height:600px;">
Добавляем функцию вывода карты на экран:
function showGoogleMap(coords){
var googlecoords = new google.maps.LatLng (coords.latitude,coords.longitude); // создаем объект google.maps.LatLng с полученными координатами широты и долготы
var mapOptions ={// еще один объект с параметрами карты
zoom:17,
center: googlecoords,
mapTypeId: 'roadmap'
};
var mapDiv = document.getElementById("map"); // получаем место html куда всунуть карту с выбранными размерами
var map = new google.maps.Map (mapDiv, mapOptions); // наконец делаем объект карту и выводим на экран
}
И в функцию positionCallback() добавляем вывод карты:
showGoogleMap(pos.coords);
Как добавить маркер смотрите тут
Как сделать обновления определения месторасположения смотрите тут
Полная инструкция лежит тут: https://developers.google.com/maps/documentation/javascript/tutorial
Как запретить получения расположения в браузере читайте тут.
Оставить свой ответ: