Карты и геолокация: примеры использования бесплатных API с открытым исходным кодом (Open Street Map и Leaflet API)

4.9 (98.46%) 13 vote[s]

С 2018 года Google требует ключ API для использования интерактивных карт на HTML-страницах. Есть альтернативные варианты, с использованием бесплатных API с открытым исходным кодом, Open Street Map и Leaflet API.

Статичное положение на карте Google (с использованием iframe, для этого не нужен API ключ)

Киевский ж/д вокзал на Google Maps


View on Google Maps

Киевский ж/д вокзал на Open Street Map при помощи Leaflet API

Ваше местоположение на карте при помощи Open Street Map и Leaflet API

Показать на карте

Узнаём координаты нужного нам места

Заходим в Гугл Карты, находим нужный нам адрес, получаем координаты. Инструкцию читайте здесь. Для примера мы взяли киевский вокзал. Получаем координаты:

Kyiv-Pasazhyrskyi
 Vokzalna St, 1, Kyiv, 02000
 50.440539, 30.489380

С кодом, в котором будем пытаться использовать Гугл-карты придётся повозиться и быть внимательным. В нижеприведенном примере находим в ссылке указанные данные и меняем их на свои. Чтобы карты заработали, используем тег <iframe>. Редактируем такие строки:

q=Kyiv-Pasazhyrskyi+Vokzalna+Street
ll=50.440539,30.489380
z=14 - можно изменить начальный зум. 0 - весь мир, 21 - максимально близко.

Весь код HTML:

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="utf-8">
 </head>
 <body>
 <h2>Статичное положение на карте Google (с использованием iframe, для этого не нужен API ключ)</h2>

<div class="mapWrapper">
  <h3>Киевский ж/д вокзал на Google Maps</h3>
<iframe width="500" height="500" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=uk&amp;geocode=&amp;q=Kyiv-Pasazhyrskyi+Vokzalna+Street&amp;aq=0&amp;oq=199+ch&amp;sll=50.440539,30.489380&amp;sspn=0.720496,0.896759&amp;ie=UTF8&amp;hq=&amp;&amp;ll=50.440539,30.489380&amp;t=m&amp;z=17&amp;output=embed"></iframe>

<!--Чтобы изменить уровень масштабирования по умолчанию, найдите  z = 17, и измените 17 на другое число, где 1 - весь мир, а 21 - как можно ближе.-->

<!--
Это часть того, что вы получаете, когда копируете из Google Maps. Это ссылка на Google Maps. Это необязательно.-->
<br /><small><a href="https://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=uk&amp;geocode=&amp;q=Kyiv-Pasazhyrskyi+Vokzalna+Street&amp;aq=0&amp;oq=199+ch&amp;sll=50.440539,30.489380&amp;sspn=0.720496,0.896759&amp;ie=UTF8&amp;hq=&amp;&amp;ll=50.440539,30.489380&amp;t=m&amp;z=14" style="color:#0000FF;font-size:18px;text-align:left">View on Google Maps</a></small>
</div>
 </body>
</html>

С остальными проще. Статичное местоположение при помощи Open Street Map и Leaflet APIС:

HTML:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css">
<script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"></script> 
 
 </head>
 <body>
 <h3>Киевский ж/д вокзал на Open Street Map при помощи Leaflet API</h3>
<div id="map2" style="height:300px;width:100%;"></div>

<script>
var center = [50.440539, 30.489380];

// Создаём карту
var map2 = L.map('map2').setView(center, 17);

// Настраиваем OSM
L.tileLayer(
  'https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 18
  }).addTo(map2);

// добавляем маркер в указанном месте
L.marker(center).addTo(map2);
</script>
 </body>
</html>

Текущее местоположение на карте при помощи Open Street Map и Leaflet API

HTML:

<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css">
<script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"></script> 
<style>
.map {
height: 300px;
}

.btn {
  background-color: rgba(10, 10, 230, .5);
  border: 0;
  color: #fff;
  padding: 10px;
  text-shadow: 0 0 1px rgba(0, 0, 0, .3);
  text-decoration: none;
  margin: 0.5rem 0 1rem;
  display: inline-block;
}
</style> 
</head>
<body>
<h2>Ваше местоположение на карте при помощи Open Street Map и Leaflet API</h2>
  <a href="#" id="show" class="btn">Показать на карте</a>
  <div id="map" class="map"></div>
<script>
// Получить текущую позицию 
function success(position) {
  var map, marker,
      latitude = position.coords.latitude,
      longitude = position.coords.longitude;
  
  // Получаем карту с использованием leaflet
  map = L.map('map').setView([latitude, longitude], 13);
  
  

  // Маркер с использованием leaflet
  marker = L.marker([latitude, longitude]).addTo(map);

  // Popup в leaflet
  marker.bindPopup('<p>Ваше местонахождение</p>').openPopup();
}

// Получить текущую позицию не удалось
function error() {
  alert('Получить текущую позицию не удалось. Пожалуйста, разрешите доступ к геолокации.');
}

// загрузка документа
var show = document.getElementById('show');

show.addEventListener('click', function(e) {
  e.preventDefault();
  if (!navigator.geolocation) {
    console.log("Браузер не поддерживает геолокацию");
  } else {
    navigator.geolocation.getCurrentPosition(success, error);
  }
}, false);
</script>  
</body>
</html>

Читайте больше по теме:

Подписаться
Уведомление о
guest
0 Комментарий
Inline Feedbacks
View all comments
Просмотры: 564

Популярные записи