Комментарий: Эта статья в основном представляет пример позиционирования HTML5 и отображение его на карте Baidu. Друзья, которые это нужно, могут ссылаться на это.
При разработке мобильных веб -или веб -приложений при использовании API MAP Baidu вам часто необходимо получить текущее местоположение с помощью позиционирования мобильного телефона и отображать его в центре на карте, которая требует использования функции геолокации HTML5.
navigator.geolocation.getCurrentPosition (обратный вызов);
После того, как координаты будут успешно получены, будет выполнен обратный вызов обратного вызова; Параметром метода обратного вызова является полученные точки координат; Затем карта может быть инициализирована, элементы управления, центральные точки и уровни масштабирования могут быть установлены, а затем на карту добавляется наложение точки:
var map = new bmap.map ("mapdiv"); // mapdiv - это идентификатор Div, который размещает карту
map.addcontrol (new bmap.navigationControl ());
map.addcontrol (new bmap.scalecontrol ());
map.addcontrol (new bmap.overviewmapcontrol ());
map.cenerandzoom (точка, 15); // точка - точка координаты, 15 - уровень масштабирования карты, максимальный уровень составляет 18
var pointmarker = new bmap.marker (point);
map.addoverlay (pointmarker);
Однако на самом деле этого недостаточно, и отображаемые результаты не являются точными. Это связано с тем, что координаты, полученные в результате GetCurrentPosition, представляют собой широту GPS и координаты долготы, а координаты карты Baidu специально преобразуются. Следовательно, требуется этап преобразования координат между получением координат позиционирования и инициализацией карты. Этот метод преобразования уже представлен в API Baidu. Представлен метод преобразования замены точки или партии: требует единой точечной преобразования, а пакетное преобразование требует ссылки. Здесь нужно только первое:
Bmap.convertor.translate (gpspoint, 0, обратный вызов);
// GP -SPONT: координаты Перед конверсией второй параметр - это метод преобразования, 0 означает, что координата GPS преобразуется в координаты BAIDU, функция обратного вызова, параметр - это новая точка координат
Подробный код примера заключается в следующем: (АК в цитате - это ключ, применяемый)
<! Doctype html>
<html lang = "zh-cn">
<голова>
<Meta Content = "Начальная масштаба = 1.0, пользовательский scalbable = no" />
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<title> </title>
<стиль типа = "text/css">
*{
высота: 100%; // Установите высоту, в противном случае она не будет отображаться
}
</style>
<script src = "http://code.jquery.com/jquery-1.11.0.min.js"> </script>
<script type = "text/javascript" src = "http://api.map.baidu.com/api?v=2.0&ak=·············> </script>
<script type = "text/javascript" src = "http://developer.baidu.com/map/jsdemo/demo/convertor.js"> </script>
<Скрипт>
$ (function () {
navigator.geolocation.getCurrentPosition (transtatePoint); // позиционирование
});
функция TranslatePoint (position) {
var currentlat = position.coords.latitude;
var currentlon = position.coords.longity;
var gpspoint = new bmap.point (currentlon, currentlat);
Bmap.convertor.translate (gpspoint, 0, initmap); // конвертировать координаты
}
функция initmap (point) {
// Инициализировать карту
map = new bmap.map ("map");
map.addcontrol (new bmap.navigationControl ());
map.addcontrol (new bmap.scalecontrol ());
map.addcontrol (new bmap.overviewmapcontrol ());
map.cenerandzoom (точка, 15);
map.addoverlay (new bmap.marker (point))
}
</script>
</head>
<тело>
<div> </div>
</body>
</html>
В процессе разработки я чувствую, что скорость позиционирования компьютера немного медленная, и я часто не могу получить координаты, поэтому карта не может быть отображена. Рекомендуется использовать мобильный телефон для его проверки, и позиционирование быстрее.
Конечно, если вы разрабатываете только мобильные веб -страницы, вам не нужно использовать jQuery. Структура слишком велика, вы можете переключиться на другие легкие мобильные фреймворки JS.