Вражда AJAX и Яндекс.Карт

@Илья888 · Регистрация: 09.04.2013

Author24 — интернет-сервис помощи студентам

Всем доброго времени суток!

Работаю в основном с железом, но IoT подкидывает интересные задачи )
По сути есть устройство (робот, машина, корабль) которое GET запросом передает свои координаты на сервер, где записывается время, долгота и широта объекта.

На самом сайте нужно отобразить карту с расположением объектов (планируется N штук)

Всё же просто, считываем из файла в переменную, затем инициализируем карту в заданных координатах...
и тут мой мозг взорвался...
Код выполняется не последовательно (я там alert-ы поставил, чтобы видеть)

сначала инициализируется карта, а потом читается файл

можете подсказать как сделать, чтобы в карту попадали именно данные из файла на сервере

PHP/HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>События геообъекта</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <!--
        Укажите свой API-ключ. Тестовый ключ НЕ БУДЕТ работать на других сайтах.
        Получить ключ можно в Кабинете разработчика: https://developer.tech.yandex.ru/keys/
    -->
    
    <!-- // подрубаем технологию AJAX -->
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    
     <script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU&amp;apikey=<a4216a79-6270-499f-9aab-85ff908b5498>" type="text/javascript"></script>
    <script src="geoobject_events.js" type="text/javascript"></script>
    <style type="text/css">
        html, body, #map {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
 
        #log {
            width: 200px;
            height: 100px;
            position: absolute;
            left: 5px;
            bottom: 5px;
            opacity: 0.7;
            padding: 5px;
            font-family: Courier, sans-serif;
            font-size: 14px;
            background: white;
            overflow: auto;
        }
    </style>
</head>
 
<body>
<!-- Создаём контейнер для карты -->
<div id="map" style="width: 600px; height: 400px"></div>
 
<!-- Создаём карту -->
<script type="text/javascript">
 
 // здесь будем читать файл
 
 var htReq = ('v' == '\v') ? new ActiveXObject ('Microsoft.XMLHTTP') : new XMLHttpRequest ();
 
function sendReq ()
{
htReq.open ('get', 'coordinates.txt');
htReq.onreadystatechange = getReq;
htReq.send (null);
}
 
function getReq ()
{
if (htReq.readyState == 4) alert (htReq.responseText); // !!!
}
 
 // попробуем вывести карту в координатах
 //Set up the data arrays here
        var date = [];
        var data1 = [];
        var data2 = [];
        var data3 = [];
    var dol = 10;
    var shir = 20;
alert("1");
// еще вариант чтения файла, не вариант
/*
var fso = new ActiveXObject("Scripting.FileSystemObject");
        var f = fso.OpenTextFile("https://diploid-analog.000webhostapp.com/coordinates/coordinates.txt");
        var fileContent;
        while (!f.AtEndOfStream)
            fileContent = f.ReadLine();
        f.Close();
        alert(fileContent);
//
*/
$(document).ready(function() {
    alert("1.5");
    
 // AJAX in the data file
    $.ajax({
        type: "GET",
        //url: "file:///home/tech/Desktop/Test/test.csv",
        url: "coordinates.txt",
        dataType: "text",
        success: function(data) {processData(data);}
        });
 
    // Let's process the data from the data file
    function processData(data) {
        var lines = data.trim().split('\n');
        var lastLine = lines.slice(-1)[0];
    
        for (var j=1; j<lines.length; j++) {
        var values = lines[j].split(','); // Split up the comma
        //seperated values
           // We read the key,1st, 2nd and 3rd rows
           date.push(values[0]); // Read in as string
 
           // Recommended to read in as float, since we'll be doing
           //some operations on this later.
           data1.push(values[1]);
           data2.push(values[2]);
           data3.push(values[3]);
        }
    //added code
    var X = date[date.length-1].split(';');
    // X[0] - время  Х[1]
    dol = X[2];
    shir = X[1];
    alert("2");
    alert("Определение координат " + dol);
    
    document.getElementById("date").innerHTML="This is the Date. " + date[date.length-1];
    document.getElementById("data1").innerHTML="This is the Data1. " + data1[data1.length-1];
    document.getElementById("data2").innerHTML="This is the Data2. " + data2[data2.length-1];
    document.getElementById("data3").innerHTML="This is the Data3. " + data3[data3.length-1];
    
    document.getElementById("X").innerHTML="This is the X. " + X[1];
    }
})
 
 
 
 
    function init() {
        alert("4");
        alert("Создание Яндекс карты " + dol);
        // Создание карты.
        // https://tech.yandex.ru/maps/doc/jsapi/2.1/dg/concepts/map-docpage/
        var myMap = new ymaps.Map("map", {
            // Координаты центра карты.
            // Порядок по умолчнию: «широта, долгота».
            center: [dol, shir],
            // Уровень масштабирования. Допустимые значения:
            // от 0 (весь мир) до 19.
            zoom: 1,
            // Элементы управления
            // https://tech.yandex.ru/maps/doc/jsapi/2.1/dg/concepts/controls/standard-docpage/
            controls: [
 
                'zoomControl', // Ползунок масштаба
                'rulerControl', // Линейка
                'routeButtonControl', // Панель маршрутизации
                'trafficControl', // Пробки
                'typeSelector', // Переключатель слоев карты
                'fullscreenControl', // Полноэкранный режим
 
                // Поисковая строка
                new ymaps.control.SearchControl({
                    options: {
                        // вид - поисковая строка
                        size: 'large',
                        // Включим возможность искать не только топонимы, но и организации.
                        provider: 'yandex#search'
                    }
                })
 
            ]
        });
 
        // Добавление метки
        // https://tech.yandex.ru/maps/doc/jsapi/2.1/ref/reference/Placemark-docpage/
        var myPlacemark = new ymaps.Placemark([dol, shir], {
            // Хинт показывается при наведении мышкой на иконку метки.
            hintContent: 'Содержимое всплывающей подсказки',
            // Балун откроется при клике по метке.
            balloonContent: 'Содержимое балуна'
        });
 
        // После того как метка была создана, добавляем её на карту.
        myMap.geoObjects.add(myPlacemark);
    }
    
     // Функция ymaps.ready() будет вызвана, когда
    // загрузятся все компоненты API, а также когда будет готово DOM-дерево.
    alert("3");
     ymaps.ready(init);
   
   
</script>
 
<button onclick="sendReq ()">Start</button>
<br>
<H1 id="coor"> 
    <script type="text/javascript"> 
</script></H1> <br>
</body>
 
</html>

@klopp · 18.03.2020, 18:48

Илья888, подозреваю что карта загружается раньше чем приходят данные с сервера
попробуйте вместо аякса

Javascript

1
2
3

fetch(url)
    .then(response => response.json())
    .then(data => init(data));

url - тут понятно что
response => response.json() сервер данные отправляет в формате json (если не json, то тут надо другой обработчик) и тут они из json переводятся в "нормальный" формат
data => init(data) в data содержатся данные с сервера, уже в виде js-объекта (или массива, смотря что прислал сервак), и вы их аргументами отправляете в функцию отрисовки карты
(правда у вас эта функция почему-то без аргументов, ну там сами разберетесь, я в яндекс-картах не особо)

	18.03.2020, 18:48