Применение географического позиционирования HTML5 и третьего партийного инструмента Baidu Map

Я видел много технических блогов и редко описывал географическое положение HTML5.

Во -первых, причина для поставщиков услуг, потому что позиционирование HTML5 предоставляется Google, поскольку Google заблокировал материк, функция позиционирования не поддерживается.

Во-вторых, географическое позиционирование поставляется с HTML5, которая имеет низкую производительность.

Поскольку географическое позиционирование является новой особенностью HTML5, нам также необходимо изучить и освоить связанные с ними API и научиться использовать географическое положение

Сначала понять здравый смысл

Новая существительная геология:

Он используется для получения географических координат, где находится текущий браузер, чтобы предоставить LBS (услуги на основе местоположения). данные:

Производительность: долгота

Широта: широта

Высота: высота

Скорость: скорость

Используйте платформу для разделения на мобильный и конец ПК:

(1) Мобильный браузер:

Сначала попытаться использовать встроенную точность данных GPS основана на рисе

Затем используйте номер мобильной базовой станции, чтобы отменить соответствующую географическую точность определения местоположения находится в устройстве

(2) Браузер ПК:

Обратный запрос через IP-адрес компьютера-

Тема:

Прежде всего, мы нажимаем F12, чтобы открыть консоль в браузере и ввести window.navigator.geology, чтобы увидеть информацию о позиционировании!

Мы видим, что в информации о позиционировании есть три основных метода, а значение:

 GetCurrentPosition: Fn (SUCC, ERR) //

С тех пор мы знаем, как использовать географическое положение в файле HTML5.

 <! {// Нажмите кнопку, чтобы запустить navigator.geolocation.getCurrentPosition (succcb, errcb); Пересечение Console.log («Успешное получение данных позиционирования»); '+Pos.coords.altitue); Пересечение console.log («Получить сбой данных по позиционированию»); }} </script> </body> </html>

Как показано на рисунке, когда кнопка щелчка, данные позиционирования успешно получены, но высота и скорость являются нулевыми из -за стороны ПК, поэтому нам нужно помнить только один метод, чтобы получить географическое позиционирование в HTML5!

 Navigator.geolocation.getcurrentposotion (function (pos) {console.log ('' 'Успешное сборы данных о местоположении'); // pos.coords.longtitude ....} (err) {console.log ('' ');

Как я уже упоминал в предисловии, использование карт Baidu в проекте и многие мобильные приложения дает пользователям выбрать информацию о позиционировании.

Прежде всего, мы должны знать, что исходный код карты Baidu не будет загружена всем. Очень совесть.

Используйте шаги:

Сначала откройте официальный веб -сайт http://lbsyun.baidu.com/, а затем вытяните его внизу:

Видно, что карта Baidu может использоваться для веб -разработки, разработки Android, разработки iOS.

URL: http://lbsyun.baidu.com/index.php?

Мы можем перейти ко многим случаям и функционировать в API.

Я объясню, что является ключом позже. Введите соответствующий мобильный телефон, почтовый ящик, а затем проверьте в почтовом ящике.

Заполните имя приложения по желанию

Выбор типа приложения --- Браузер Nide

Список рефереров: относится к тому, кто может получить доступ к вашему приложению, как вы можете получить доступ к вашему приложению в том, как к нему доступа, и заполнить номер звезды « *», что означает, что все люди могут получить к нему, потому что только тестирование может быть сделано, И проект может быть выполнен в будущем. Пересечение Затем нажмите «Отправить», чтобы завершить творение! Пересечение

После создания приложения появляется следующий интерфейс:

Здесь он покажет номер приложения, имя приложения и самый важный код приложения, созданный здесь, который является ключом, упомянутым ранее!

После получения ключа мы возвращаемся на домашнюю страницу http://lbsyun.baidu.com/index.php?title=jspopulure

Нажмите на руководство по разработке слева, вы можете увидеть использование связанных API и чехлов! Пересечение Этот API - самая совесть в API, нет чепухи,

Письмо очень подробно и легко понять, потому что их слишком много, просто представьте здесь несколько основных использования! Пересечение Пересечение

Мы создаем новый HTML -файл и копируем приведенный выше код в файл HTML

 <! = jrbp iu6jcbpsxgvdqxac0c. Предыдущая версия и метод ссылки на предыдущую версию: src = http://api.map.baidu.com/api? ; Экземпляр карты, чтобы избежать сильного веса с именем карты, поэтому используйте bmap.map var map = new bmap.map (контейнер); Центральные точки координаты и уровни карты 1 ~ ~ Уровень 18 Map.cenerandzoom (точка, 18); ); тело> </html>

Используйте карту Baidu:

ОК, мы успешно использовали карты Baidu в файле HTML. Пересечение

Связанная функция Описание:

 <Script src = http://api.map.baidu.com/api?

Введите длинный ключ ствола в АК, чтобы процитировать карту Baidu! Пересечение

Создать отображение MAP-MUST-MUST.

var map = new bmap.map (контейнер);

Создайте указанную точку, вашу широту и информацию о долготе! Пересечение Если вы не знаете, вы можете использовать предыдущий

NAVIGATOR.GEOLOGY.GETCURRENTPOSOTETION для получения широты и долготы.

var point = new bmap.point (116,300982,39,915907);

Номера карт отображения в центре точки, поскольку центр 17 относится к уровню, а уровень можно разделить на уровень 1–18. Чем меньше уровень уровня, тем больше диапазон карты, и чем больше уровень уровня Уровень. Пересечение --- Должен удирать.

map.cenerandzoom (точка, 17);

Карта может быть выбрана с помощью мыши.

map.enablescrollwheelzoom (true);

Карта показывает контроль-эффект протестирован сам по себе.

 map.addcontrol (new bmap.navigationcontrol ());

Показать этикетку на карте (метка) -Optional

var marker = map.addoverlay (new bmap.marker (point));

ОК, здесь сказано здесь, третья партийная карта, есть много забавных функций, которые можно использовать сами по себе, поэтому методы и параметры можно найти в API!

Приведенное выше содержимое этой статьи.