Яндекс карты – интерактивная карта посетителей

Для начала, получим API ключ в кабинете разработчика Яндекс. Заполняем элементарную анкету, выбираем бесплатный тариф и получаем API ключик. Начнём создание карты. Моя будет на этой странице.

Данный ключ добавляем к подключаемому js файлу:

<script src="https://api-maps.yandex.ru/2.1/?apikey=<ваш API-ключ>&lang=ru_RU" type="text/javascript"></script>

Подключаем скрипт к странице и создаём блок под будущую карту например <div id="map"></div> и инициализируем карту по примеру:

//js
    ymaps.ready(init);
    function init(){ 
        // Создание карты.    
        var myMap = new ymaps.Map("map", {
            center: [51.67, 39.21],
            zoom: 4
        });
    }

Здесь вводим сразу два параметра, координаты цента карты (Я выбрал свой родной город) и zoom по умолчанию. На этом с созданием карты – всё, теперь будем добавлять на неё новых пользователей при заходе на сайт.

Определим местонахождение пользователя с помощью метода geolocation.get().

Доступ к геоданным пользователя
var location = ymaps.geolocation.get();

// Асинхронная обработка ответа.
location.then(
  function(result) {
    // Добавление местоположения на карту.
    myMap.geoObjects.add(result.geoObjects)
  },
  function(err) {
    console.log('Ошибка: ' + err)
  }
);

При переходе на страницу с картой, сайт запросит доступ к геоданным Вашего устройства, которые мы выводим на карту. Сделаем скрипт передачи данных на сервер. Хранить данные будем в простом .txt файле. Назовём его target.txt, закинем на сервер и заполним тестовыми данными.

Напишем функцию, которая будет смотреть в файл target.txt передавать их в переменную targetFile. Распартсим строки файла.

var targetFile = loadFile("target.txt");
var targetList = targetFile.split('\n');

function loadFile(filePath) {
  var result = null;
  var xmlhttp = new XMLHttpRequest();
  xmlhttp.open("GET", filePath, false);
  xmlhttp.send();
  if (xmlhttp.status==200) {
    result = xmlhttp.responseText;
  }
  return result;
}

Преобразуем строки в объекты, иначе не сможем передать параметры координат в myMap.geoObjects.add. И выведем эти данные на Яндекс.Карту.

targetList.forEach(function(element) {
 element = JSON.parse(element);
 myMap.geoObjects.add(new ymaps.Placemark(element));
});

Остаётся только реализовать добавление новых данных самим пользователем.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *