Хобрук: Ваш путь к мастерству в программировании

обновить маркеры из JSON на картах google

Джанго 1.8 и питон 2.7. Я пытаюсь обновить местоположение маркера с помощью jQuery и Ajax.

Мой объект json имеет только один массив:

[{"latitud": "55.75222", "ciudad": "Moscu", "longitud": "37.61556"}]

После инициализации карты я создаю эту функцию для установки маркера, а также использую setTimeout для получения новой позиции маркера.

function setMarker(map) {

    $.getJSON('http://127.0.0.1:8000/maps/car/gpspos/', function(userPos) {
        userLat = userPos["userPosView"][0].latitud;
        userLon = userPos["userPosView"][0].longitud;
        var position = new google.maps.LatLng(userLat,userLon);
        var marker = new google.maps.Marker({
            position: position,
        });
        marker.setMap(map)


        // A function that checks if the user has a new position and set marker there
        $(document).ready(function(){
            setTimeout(function() {
                (marker.getPosition());
            },5000);
        });
    });
}

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

python django google-maps javascript json
11.11.2015

  • Как значения широты/долготы вводятся в базу данных? 11.11.2015
  • На данный момент я ввожу это вручную, но в будущем приложение будет отправлять эти значения. 12.11.2015

Ответы:


1

Сохраните предыдущую lat, long в переменной и проверьте ее, когда снова запросите базу данных.

var lat, lng;

function setMarker(map) {

    $.getJSON('http://127.0.0.1:8000/maps/car/gpspos/', function(userPos) {
        userLat = userPos["userPosView"][0].latitud;
        userLon = userPos["userPosView"][0].longitud;
        if(lat == null){ lat = userLat; }
        if(lng == null){ lng = userLat; }
        if(userLat != lat && userLon != lng){
            lat = userLat;
            lng = userLong;

            //do stuff
            Console.log("lat lng changed");
        }
        var position = new google.maps.LatLng(userLat,userLon);
        var marker = new google.maps.Marker({
            position: position,
        });
        marker.setMap(map)
    });
}

Я предполагаю, что вы просите БД вызвать метод setMarker.

11.11.2015
  • Да, я вызываю setMarker в моей функции initializeMap(). 11.11.2015
  • Однако я хочу обновлять страницу каждые 5 секунд, и если вводится новая позиция, маркер должен быть в новой позиции. 11.11.2015
  • Тогда лучшим подходом для этого является использование DataLayer с использованием метода map.data.loadGeoJson('http://..'). Каждый элемент, отправленный ajax-методом (созданным моей функцией), визуализируется, если элемент имеет тот же идентификатор, позиция обновляется автоматически. 11.11.2015
  • Позвольте мне объяснить это лучше. У меня есть сервер django с sqlite db. В базе данных у меня есть много данных, таких как широта и долгота пользователя. Затем я делаю запрос, выбирая последнюю широту и долготу текущего пользователя, вошедшего в систему, и анализирую его как формат JSON. 12.11.2015
  • В моем Javascript я могу инициализировать карту Google и установить маркер. Но я хочу проверять JSON каждые 5 секунд, чтобы узнать последнюю позицию моего зарегистрированного пользователя. 12.11.2015

    • 2

    Это решение, использующее слой данных.

    Вы можете вызвать сервер с помощью метода setTime:

    var geoUrl = 'http://127.0.0.1:8000/maps/car/gpspos/';
$(document).ready(function(){
    setTimeout(function() {
        map.data.loadGeoJson(geoUrl);
    },5000);
});

    Но вы должны отправить json с сервера в формате GeoJSON.

    {
    "type": "FeatureCollection",
    "features": [
    {
        "type": "Feature",
        "id": 2
        "geometry": {
            "type": "Point",
            "coordinates": [125.6, 10.1]
        },
        "properties": {
            "name": "Dinagat Islands",
            "ciudad": "Moscu"
        }
    }
]
}

    При втором обращении к серверу каждая функция обновляется по своему идентификатору, поэтому позиция изменится, если она была изменена на стороне сервера.

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

    map.data.setStyle(function(feature){
  //getting property
  var ciudad = feature.getProperty('ciudad');

  //setting style for each feature
  return({
      icon: '//example.com/path/to/image.png',
      fillColor: 'green'
  });

});
    12.11.2015
    Новые материалы
    Основы принципов S.O.L.I.D, Javascript, Git и NoSQL
    каковы принципы S.O.L.I.D? Принципы SOLID призваны помочь разработчикам создавать надежные, удобные в сопровождении приложения. мы видим пять ключевых принципов. Принципы SOLID были разработаны..
    Как настроить Selenium в проекте Angular
    Угловой | Селен Как настроить Selenium в проекте Angular Держите свое приложение Angular и тесты Selenium в одной рабочей области и запускайте их с помощью Mocha. В этой статье мы..
    Аргументы прогрессивного улучшения почти всегда упускают суть
    В наши дни в кругах веб-разработчиков много болтают о Progressive Enhancement — PE, но на самом деле почти все аргументы с обеих сторон упускают самую фундаментальную причину, по которой PE..
    Введение в Джанго Фреймворк
    Схема «работать умно, а не усердно» В этой и последующих статьях я познакомлю вас с тем, что такое фреймворк Django и как создать свое первое приложение с помощью простых и понятных шагов, а..
    Настольный ПК как «одно кольцо, чтобы править всеми» домашних компьютеров
    Вид после 9 месяцев использования С настольных компьютеров все началось, но в какой-то момент они стали «серверами», и мы все перешли на ноутбуки. В прошлом году я столкнулся с идеей настольных..
    Расширенные методы безопасности для VueJS: реализация аутентификации без пароля
    Руководство, которое поможет вам создавать безопасные приложения в долгосрочной перспективе Безопасность приложений часто упускается из виду в процессе разработки, потому что основная..
    стройный-i18следующий
    Представляем стройную оболочку для i18next. Эта библиотека, основанная на i18next, заключает экземпляр i18next в хранилище svelte и отслеживает события i18next, такие как languageChanged,..