Комментарий: Сегодня мы объединим геолокацию HTML5 для разработки небольшого приложения. Заинтересованные друзья могут узнать об этом. Если есть какие -либо недостатки, я надеюсь, что герой даст вам совет.
Сегодня мы объединим геолокацию HTML5 с Google Maps для разработки небольшого приложения. Адрес API Google Maps: https://developers.google.com/maps/documentation/javascript/?hl=zh-cn.Чтобы вызвать карты Google, реализация должна добавить ссылку на JS <script type = text/javascript src =? Sensor = false> </script>, где конкретное значение параметра датчика:
Чтобы использовать API Google MAPS, вам необходимо указать, использует ли ваше приложение датчики (например, локаторы GPS) в любой библиотеке API или запросов API MAPS, чтобы определить, где находится пользователь. Это особенно важно для мобильных устройств. Если ваше приложение Google Maps API использует любую форму датчика для определения местоположения устройства, доступа к вашему приложению, вы должны объявить об этом, установив значение параметра датчика на TRUE.
HTML -часть относительно проста, вам нужно только подготовить Div:
<тело>
<div>
</div>
</body>
Структура кода JS заключается в следующем:
<script type = "text/javascript">
карта var;
var browsersupport = false;
var попытки = 0;
$ (document) .ready (function () {
// Инициализировать карту
InitMap ();
//позиция
getLocation ();
// отслеживание местоположения
watchlocation ();
});
функция initmap () {
/ * Установите все параметры для карты */
var options = {
};
/ * Создать новую карту для приложения */
map = new Google.maps.map ($ ('#map') [0], options);
}
/*
* Если объект геолокации W3C доступен, получите текущий
* Местоположение, в противном случае сообщите о проблеме
*/
функция getLocation () {
}
function WatchLocation () {
}
/ * Построить местоположение на карте и увеличить его */
Функциональный диалект графика (позиция) {
}
/ * Сообщите о любых ошибках, используя эту функцию */
Функция отчета roproblem (e) {
}
</script>
Метод initmap состоит в том, чтобы вызвать API Google Maps для инициализации карты. Он должен установить объект параметров и использовать его при вызове инициализации карты.
функция initmap () {
/ * Установите все параметры для карты */
var options = {
Увеличение: 4,
Центр: New Google.maps.latlng (38.6201, -90.2003),
maptypeid: google.maps.maptypeid.roadmap,
maptypecontrol: true,
maptypecontroloptions: {
стиль: google.maps.maptypecontrolstyle.horizontal_bar,
Позиция: google.maps.controlposition.bottom_center
},
Pancontrol: True,
pancontroloptions: {
Позиция: Google.maps.controlposition.top_right
},
ZoomControl: правда,
ZoomControloPtions: {
Стиль: google.maps.zoomcontrolstyle.large,
Позиция: google.maps.controlposition.left_center
},
ScaleControl: True,
ScaleControloPtions: {
Позиция: google.maps.controlposition.bottom_left
},
StreetViewControl: True,
StreetViewControloPtions: {
Позиция: google.maps.controlposition.left_top
}
};
/ * Создать новую карту для приложения */
map = new Google.maps.map ($ ('#map') [0], options);
}
Методы GetLocation и WatchLocation для получения информации о позиционировании.
функция getLocation () {
/ * Проверьте, поддерживает ли браузер API W3C Geolocation API */
if (navigator.geolocation) {
Browsersupport = true;
navigator.geolocation.getCurrentPosition (PlotLocation, ReportProblem, {Timeout: 45000});
} еще {
ReportProblem ();
}
}
function WatchLocation () {
/ * Проверьте, поддерживает ли браузер API W3C Geolocation API */
if (navigator.geolocation) {
Browsersupport = true;
navigator.geolocation.watchposition (Lotlocation, ReportProblem, {Timeout: 45000});
} еще {
ReportProblem ();
}
}
После успешного получения информации о местоположении вызовите метод построения построения, чтобы отобразить местоположение на картах Google.
Функциональный диалект графика (позиция) {
попытки = 0;
var point = new google.maps.latlng (position.coords.latitude, position.coords.longitude);
var marker = new Google.maps.marker ({
позиция: пункт
});
marker.setmap (map);
map.setCenter (point);
map.setzoom (15);
}
Демонстрация Адрес: GoogleMapgeolocation.rar