diff options
author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:42:52 -0500 |
---|---|---|
committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:42:52 -0500 |
commit | 074785cea106179cb3305637055ab0a009ca74f2 (patch) | |
tree | e6ae371cccd642aa2b67f39752a2cdf1fd4eb040 /files/ru/web/api/geolocation | |
parent | da78a9e329e272dedb2400b79a3bdeebff387d47 (diff) | |
download | translated-content-074785cea106179cb3305637055ab0a009ca74f2.tar.gz translated-content-074785cea106179cb3305637055ab0a009ca74f2.tar.bz2 translated-content-074785cea106179cb3305637055ab0a009ca74f2.zip |
initial commit
Diffstat (limited to 'files/ru/web/api/geolocation')
4 files changed, 412 insertions, 0 deletions
diff --git a/files/ru/web/api/geolocation/getcurrentposition/index.html b/files/ru/web/api/geolocation/getcurrentposition/index.html new file mode 100644 index 0000000000..2a0774dce8 --- /dev/null +++ b/files/ru/web/api/geolocation/getcurrentposition/index.html @@ -0,0 +1,82 @@ +--- +title: Geolocation.getCurrentPosition() +slug: Web/API/Geolocation/getCurrentPosition +translation_of: Web/API/Geolocation/getCurrentPosition +--- +<p>{{securecontext_header}}{{ APIRef("Geolocation API") }}Метод <strong><code>Geolocation.getCurrentPosition()</code></strong> используется для получения текущего местоположения устройства.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox">navigator.geolocation.getCurrentPosition(<em>success[</em>, <em>error[</em>, <em>options]]</em>)</pre> + +<h3 id="Параметры">Параметры</h3> + +<dl> + <dt><code><var>success</var></code></dt> + <dd>Функция обратного вызова, которая принимает объект {{domxref("Position")}} в качестве единственного входного параметра.</dd> + <dt><code><var>error</var></code> {{optional_inline}}</dt> + <dd>Необязательная функция обратного вызова, принимающая объект {{domxref("PositionError")}} как единственный входной параметр.</dd> + <dt><code><var>options</var></code> {{optional_inline}}</dt> + <dd>Необязательный объект {{domxref("PositionOptions")}}.<br> + Включает в себя + <ul> + <li><code>maximumAge</code>: целое число (миллисекунды) | infinity - максимальное время кеширования позиции.</li> + <li><code>timeout</code>: целое число (миллисекунды) - количество времени до вызова callback ошибки. Если 0, вызов не происходит.</li> + <li><code>enableHighAccuracy</code>: false | true</li> + </ul> + </dd> +</dl> + +<h2 id="Пример">Пример</h2> + +<pre class="brush: js">var options = { + enableHighAccuracy: true, + timeout: 5000, + maximumAge: 0 +}; + +function success(pos) { + var crd = pos.coords; + + console.log('Ваше текущее метоположение:'); + console.log(`Широта: ${crd.latitude}`); + console.log(`Долгота: ${crd.longitude}`); + console.log(`Плюс-минус ${crd.accuracy} метров.`); +}; + +function error(err) { + console.warn(`ERROR(${err.code}): ${err.message}`); +}; + +navigator.geolocation.getCurrentPosition(success, error, options); +</pre> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Geolocation')}}</td> + <td>{{Spec2('Geolocation')}}</td> + <td>Начальная спецификация.</td> + </tr> + </tbody> +</table> + +<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2> + +<p>{{Compat("api.Geolocation.getCurrentPosition")}}</p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li><a href="/en-US/docs/WebAPI/Using_geolocation" title="/en-US/docs/WebAPI/Using_geolocation">Using geolocation</a></li> + <li>{{domxref("Navigator.geolocation")}}</li> +</ul> diff --git a/files/ru/web/api/geolocation/index.html b/files/ru/web/api/geolocation/index.html new file mode 100644 index 0000000000..75be7f3457 --- /dev/null +++ b/files/ru/web/api/geolocation/index.html @@ -0,0 +1,69 @@ +--- +title: Geolocation +slug: Web/API/Geolocation +tags: + - API + - Advanced + - Geolocation API + - Interface + - Reference + - Secure context +translation_of: Web/API/Geolocation +--- +<div>{{APIRef}}</div> + +<p>Интерфейс <code><strong>Geolocation</strong></code> представляет возможность программно получит местоположение устройства. Он даёт веб-содержимому к позиции пользователя. Это также помогает сайтам и приложениям предоставлять результаты, основываясь полученных данных.</p> + +<p>Объект с этим интерфейсом получается с помощью свойства {{domxref("NavigatorGeolocation.geolocation")}} и реализуется объектом {{domxref("Navigator")}}.</p> + +<div class="note"> +<p><strong>Примечание:</strong> По некоторым причинам, связанным с безопаностью, когда веб-страница пытается получить доступ к местоположению, пользователь будет уведомлен, а также будет запрошено разрешение. Имейте в виду, что у каждого браузера есть свои политики и методы для запроса этого разрешения.</p> +</div> + +<h2 id="Свойства">Свойства</h2> + +<p><em>Интерфейс <code>Geolocation</code> ни реализует, ни наследует никаких свойств.</em></p> + +<h2 id="Методы">Методы</h2> + +<p><em><em>Интерфейс <code>Geolocation</code> не наследует никаких методов</em></em>.</p> + +<dl> + <dt>{{domxref("Geolocation.getCurrentPosition()")}} {{securecontext_inline}}</dt> + <dd>Определяет местоположение устройства и возвращает объект {{domxref("Position")}} с данными.</dd> + <dt>{{domxref("Geolocation.watchPosition()")}} {{securecontext_inline}}</dt> + <dd>Возвращает <code>long</code> значение, предоставляет вновь созданную callback-функцию, вызываемую при изменении местоположения устройства.</dd> + <dt>{{domxref("Geolocation.clearWatch()")}} {{securecontext_inline}}</dt> + <dd>Удаляет обработчик, созданный с помощью <code>watchPosition()</code>.</dd> +</dl> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Geolocation', '#geolocation_interface')}}</td> + <td>{{Spec2('Geolocation')}}</td> + <td>Основная спецификация.</td> + </tr> + </tbody> +</table> + +<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2> + + + +<p>{{Compat("api.Geolocation")}}</p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li><a href="/ru/docs/WebAPI/Geolocaion/Using_geolocation" title="/en-US/docs/WebAPI/Using_geolocation">Использование геолокации</a></li> +</ul> diff --git a/files/ru/web/api/geolocation/using_geolocation/index.html b/files/ru/web/api/geolocation/using_geolocation/index.html new file mode 100644 index 0000000000..39847dedc5 --- /dev/null +++ b/files/ru/web/api/geolocation/using_geolocation/index.html @@ -0,0 +1,91 @@ +--- +title: Использование геолокации +slug: Web/API/Geolocation/Using_geolocation +tags: + - Geolocation API + - Guide + - Intermediate +translation_of: Web/API/Geolocation_API +--- +<div>{{securecontext_header}}{{DefaultAPISidebar("Geolocation API")}}</div> + +<p><strong>Geolocation API</strong> позволяет пользователю предоставлять свое местоположение web-приложению, если пользователь согласится предоставить его. Из соображений конфиденциальности, у пользователя будет запрошено разрешение на предоставление информации о местоположении.</p> + +<h2 id="Концепты_и_использование">Концепты и использование</h2> + +<p>Вы часто хотите получать информацию о местоположении пользователя в своём веб приложении, например, для отображения участка на карте, либо для того, чтобы показывать информацию, основанную на местоположении посетителя.</p> + +<p>API геолокации может быть вызвано через {{domxref("Navigator.geolocation")}}; это заставит браузер пользователя вывести уведомление с запросом для доступа к текущему местоположению. Если его одобрят, то браузер сможет даст весь доступный функционал для работы с информацией о местонахождении (например, GPS).</p> + +<p>Тогда разработчику станут доступны несколько разных способов получения соответствующей информации:</p> + +<ul> + <li>{{domxref("Geolocation.getCurrentPosition()")}}: возвратит местоположение устройства</li> + <li>{{domxref("Geolocation.watchPosition()")}}: зарегистрирует функцию-обработчик, которая будет вызываться автоматически каждый раз, когда местоположение изменится, возвращая новые данные.</li> +</ul> + +<p>В обоих случая, методы принимают три аргумента:</p> + +<ul> + <li>Обязательную callback-функцию при успехе: если удалось получить местоположение пользователя, то функция вызовется с объектом {{domxref("GeolocationPosition")}} как одним параметром, предоставляющим доступ к данным о месторасположении.</li> + <li>Необязательную callback-функцию при ошибке: если не удалось получить позицию, то callback-функция вызовется с объектом {{domxref("GeolocationPositionError")}} как одним параметром, содержащим информацию о том, что пошло не так.</li> + <li>Необязательный объект {{domxref("PositionOptions")}}, который содержит надстройки получения данных о местоположении.</li> +</ul> + +<h2 id="Интерфейсы">Интерфейсы</h2> + +<dl> + <dt>{{domxref("Geolocation")}}</dt> + <dd>Главный класс этого API — содержит методы для получения текущего местоположения пользователя, наблюдает за его изменениями и удаляет функции-наблюдатели.</dd> + <dt>{{domxref("GeolocationPosition")}}</dt> + <dd>Предоставляет месторасположение пользователя. Экземпляр <code>GeolocationPosition</code>, полученный при успешном вызове одного из методов {{domxref("Geolocation")}}, внутри callback-функции при успехе, содержит метку времени плюс экземпляр объекта {{domxref("GeolocationCoordinates")}}.</dd> + <dt>{{domxref("GeolocationCoordinates")}}</dt> + <dd>Предоставлять координаты пользователя; Экземпляр <code>GeolocationCoordinates</code> содержит широту, долготу и прочую важную подобную информацию.</dd> + <dt>{{domxref("GeolocationPositionError")}}</dt> + <dd><code>GeolocationPositionError</code> возвращается при неуспешном вызове методов, содержащихся в {{domxref("Geolocation")}}, внутри callback-функции при ошибке, содержит код ошибки и сообщение.</dd> + <dt>{{domxref("Navigator.geolocation")}}</dt> + <dd>Точка входа в API. Возвращает экземпляр объекта {{domxref("Geolocation")}}, из которого становятся доступны все функции и методы.</dd> +</dl> + +<h2 id="Словари">Словари</h2> + +<dl> + <dt>{{domxref("PositionOptions")}}</dt> + <dd>Предоставляет объект, содержащий опции, которые можно передать как параметр в {{domxref("Geolocation.getCurrentPosition()")}} и {{domxref("Geolocation.watchPosition()")}}.</dd> +</dl> + +<h2 id="Примеры">Примеры</h2> + +<p>{{page("/ru/docs/Web/API/Geolocation_API/Using","Examples")}}</p> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + <tr> + <td>{{SpecName("Geolocation")}}</td> + <td>{{Spec2("Geolocation")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Поддержка_браузерами">Поддержка браузерами</h2> + +<p>{{Compat("api.Geolocation")}}</p> + +<h3 id="Доступность">Доступность</h3> + +<p>Так как местоположение, основанное на WiFi, часто предоставляется Google, API местоположения может быть не доступен в Китае. Вы можете использовать местных провайдеров, таких как <a href="http://lbsyun.baidu.com/index.php?title=jspopular/guide/geolocation">Baidu</a>, <a href="https://lbs.amap.com/api/javascript-api/guide/services/geolocation#geolocation">Autonavi</a> или <a href="http://lbs.qq.com/tool/component-geolocation.html">Tencent</a>. Эти сервисы используют IP-адресс пользователя и/или приложение для предоставления наиболее точной позиции.</p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li><a href="https://wiki.developer.mozilla.org/ru/docs/Web/API/Geolocation_API/Using">Использование API местоположения</a></li> + <li><a href="https://www.w3.org/TR/geolocation-API/" rel="external">API местоположения на w3.org</a></li> + <li><a href="https://hacks.mozilla.org/2013/10/who-moved-my-geolocation/">Кто изменил моё местоположение?</a> (Hacks блог)</li> +</ul> diff --git a/files/ru/web/api/geolocation/using_geolocation/using_the_geolocation_api/index.html b/files/ru/web/api/geolocation/using_geolocation/using_the_geolocation_api/index.html new file mode 100644 index 0000000000..5fa1055292 --- /dev/null +++ b/files/ru/web/api/geolocation/using_geolocation/using_the_geolocation_api/index.html @@ -0,0 +1,170 @@ +--- +title: Использование Geolocation API +slug: Web/API/Geolocation/Using_geolocation/Using_the_Geolocation_API +tags: + - Geolocation API + - Guide + - Tutorial +translation_of: Web/API/Geolocation_API/Using_the_Geolocation_API +--- +<div>{{securecontext_header}}{{DefaultAPISidebar("Geolocation API")}}</div> + +<p>Geolocation API позволяет пользователю предоставлять свое местоположение web-приложению, если пользователь согласится предоставить его. Из соображений конфиденциальности, у пользователя будет запрошено разрешение на предоставление информации о местоположении.</p> + +<h2 id="Объект_геолокации">Объект геолокации</h2> + +<p><a href="ru/docs/Web/API/Geolocation">API геолокации</a> доступен через объект {{domxref("navigator.geolocation")}}.</p> + +<p>Если объект существует, функции определения местоположения доступны. Вы можете проверить это слеюущим образом:</p> + +<pre class="brush: js">if ("geolocation" in navigator) { + /* местоположение доступно */ +} else { + /* местоположение НЕ доступно */ +} +</pre> + +<h3 id="Получение_текущего_местоположения">Получение текущего местоположения</h3> + +<p>Чтобы получить текущее местоположение пользователя, вы должны вызвать метод {{domxref("geolocation.getCurrentPosition()","getCurrentPosition()")}}. Это инициирует асихронный запрос для обнаружения местоположения пользователя, и запрашивает аппаратные средства позиционирования, чтобы получить последнюю актуальную информацию. Когда местоположение определено, выполняется callback. По желанию вы можете указать вторую callback функцию для обработки ошибки, которая запустится в случае ошибки. Третий, опциональный параметр - объект с опциями, где вы можете настроить максимальное значение возвращаемых данных, время ожидания ответа на запрос, и, при желании, точность возвращаемых данных.</p> + +<div class="note"> +<p><strong>Note:</strong> По умолчанию {{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}} пытается вернуть результат так быстро, как это возможно, за счёт чего даёт не очень точный результат. Это может быть полезно, если вам нужно быстро получить ответ, при этом не важна точность. Устройства с GPS, например, могут пытаться скорректировать данные GPS около минуты и даже больше, поэтому в самом начале могут вернуться менее точные данные (местоположение IP или wifi-сети), полученные {{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}}.</p> +</div> + +<pre class="brush: js">navigator.geolocation.getCurrentPosition(function(position) { + do_something(position.coords.latitude, position.coords.longitude); +});</pre> + +<p>Функция <code>do_something()</code>, в примере выше, будет вызвана лишь тогда, когда данные о местоположении будут получены.</p> + +<h3 id="Наблюдение_за_текущим_местоположением">Наблюдение за текущим местоположением</h3> + +<p>Если данные о местоположении меняются (либо устройство находится в движении, либо пришли более точные данные о геопозиции), вы можете указать callback функцию, которая будет вызывается при любом обновлении данных о местоположении. Это делается с использованием функции {{domxref("Geolocation.watchPosition()","watchPosition()")}}, которая имеет несколько входных параметров: {{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}}. Эта функция вызывается много раз, позволяя браузеру обновлять данные о текущей локации либо во время движения, либо после получения более точной информации о местоположении (после применения более точных приемов). Функция, которая вызывается при ошибке, для {{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}}, при желании, может быть вызвана неоднократно.</p> + +<div class="note"> +<p><strong>Примечание:</strong> Вы можете использовать {{domxref("Geolocation.watchPosition()","watchPosition()")}} без вызова {{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}}.</p> +</div> + +<pre class="brush: js">var watchID = navigator.geolocation.watchPosition(function(position) { + do_something(position.coords.latitude, position.coords.longitude); +});</pre> + +<p>Метод {{domxref("Geolocation.watchPosition()","watchPosition()")}} возвращает числовой ID, который может быть использован для идентификации наблюдателя за местоположением; используйте его вместе с методом {{domxref("Geolocation.clearWatch()","clearWatch()")}}, чтобы перестать получать новые данные о местоположении.</p> + +<pre class="brush: js">navigator.geolocation.clearWatch(watchID); +</pre> + +<h3 id="Точная_настройка_отклика"><span class="short_text" id="result_box" lang="ru"><span>Точная</span> <span>настройка</span> <span>отклика</span></span></h3> + +<p>{{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}} и {{domxref("Geolocation.watchPosition()","watchPosition()")}} принимают callback-функцию при успехе, необязательную callback-функцию при ошибке и необязательный объект <code><a href="/ru/docs/Web/API/PositionOptions">PositionOptions</a></code>.</p> + +<p>Этот объект позволяет вам включить возможность определения позиции с высокой точностью, указать максимальное время кэширования значения позиции (при повторных запросах, пока время не вышло, вам будет возвращается кэшированное значение; после браузер будет запрашивать актуальные данные), а также указать значение, устанавливающее интервал — как часто браузер должен пытаться получить данные о местоположении, прежде чем выйдет время.</p> + +<p>Вызов {{domxref("Geolocation.watchPosition()","watchPosition")}} может выглядит следующим образом:</p> + +<pre class="brush: js">function geo_success(position) { + do_something(position.coords.latitude, position.coords.longitude); +} + +function geo_error() { + alert("Извините, нет доступной позиции."); +} + +var geo_options = { + enableHighAccuracy: true, + maximumAge : 30000, + timeout : 27000 +}; + +var wpid = navigator.geolocation.watchPosition(geo_success, geo_error, geo_options);</pre> + +<h2 id="Описание_позиции">Описание позиции</h2> + +<p>Местоположение пользователя содержится в экземпляре объекта {{domxref("GeolocationPosition")}}, содержащего внутри экземпляр другого объекта — {{domxref("GeolocationCoordinates")}}.</p> + +<p>Экземпляр <code>GeolocationPosition</code> содержит только две вещи, свойство <code>coords</code>, внутри которого <code>GeolocationCoordinates</code> и свойство timestamp, внутри которого экземпляр {{domxref("DOMTimeStamp")}}, предоставляющее метку времени, созданную при получении данные.</p> + +<p>Экземпляр <code>GeolocationCoordinates</code> содержит некоторое количество свойств, двое из которых вы будете чаще всего использовать: <code>latitude</code> и <code>longitude</code>, которые помогут вам отобразить полученную позицию на карте. Поэтому многие callback-функции с успешным получением позиции выглядят очень просто:</p> + +<pre class="brush: js">function success(position) { + const latitude = position.coords.latitude; + const longitude = position.coords.longitude; + + // Дальше код, который что-то делает с широтой(latitude) и долготой(longitude) +}</pre> + +<p>Однако, вы также можете получить и другую информацию из объекта <code>GeolocationCoordinates</code>, такую как высота над уровнем моря, скорость, направление устройства и точные данные о высоте, долготе и широте.</p> + +<h2 id="Обработка_ошибок">Обработка ошибок</h2> + +<p>Callback-функция для ошибок, если она была передана в <code>getCurrentPosition()</code> или <code>watchPosition()</code>, ожидает экземпляр объекта <code><a href="/en-US/docs/Web/API/GeolocationPositionError">GeolocationPositionError</a></code> в качестве первого аргумента. Он будет содержать два свойства, <code>code</code>, который укажет на то, какая именно ошибка произошла и понятное для человека <code>message</code>, описывающее значение поля code.</p> + +<p>Функция может выглядеть примерно так:</p> + +<pre class="brush: js">function errorCallback(error) { + alert('ERROR(' + error.code + '): ' + error.message); +}; +</pre> + +<h2 id="Примеры">Примеры</h2> + +<p>Следующий пример использует Geolocation API для того, чтобы получить широту и долготу пользователя. При успешном выполнении, ссылка будет вести на <code>openstreetmap.org</code>, который отобразит пользовательскую позицию на карте.</p> + +<div class="hidden"> +<pre class="brush: css">body { + padding: 20px; + background-color:#ffffc9 +} + +button { + margin: .5rem 0; +} +</pre> +</div> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html;"><button id = "find-me">Show my location</button><br/> +<p id = "status"></p> +<a id = "map-link" target="_blank"></a> +</pre> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js">function geoFindMe() { + + const status = document.querySelector('#status'); + const mapLink = document.querySelector('#map-link'); + + mapLink.href = ''; + mapLink.textContent = ''; + + function success(position) { + const latitude = position.coords.latitude; + const longitude = position.coords.longitude; + + status.textContent = ''; + mapLink.href = `https://www.openstreetmap.org/#map=18/${latitude}/${longitude}`; + mapLink.textContent = `Широта: ${latitude} °, Долгота: ${longitude} °`; + } + + function error() { + status.textContent = 'Невозможно получить ваше местоположение'; + } + + if (!navigator.geolocation) { + status.textContent = 'Geolocation не поддерживается вашим браузером'; + } else { + status.textContent = 'Определение местоположения…'; + navigator.geolocation.getCurrentPosition(success, error); + } + +} + +document.querySelector('#find-me').addEventListener('click', geoFindMe); +</pre> + +<h3 id="Демо">Демо</h3> + +<p>{{EmbedLiveSample('Examples', 350, 150, "", "", "", "geolocation")}}</p> |