Как удалить старые маркеры карты и обновить новые в Google Maps

Я создаю приложение, которое получает местоположение в реальном времени и отображает его на карте Google. Через определенный промежуток времени мне нужно удалить старые маркеры и отобразить обновленные маркеры.

Ниже мой код

function initMap(rtl_data) {
        directionsService = new google.maps.DirectionsService();
        directionsDisplay = new google.maps.DirectionsRenderer();

        var latlng = new google.maps.LatLng(24.238162, 45.156379);
        var myOptions = {
            zoom: 7,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var marker = []
        var map = new google.maps.Map(document.getElementById("map"),myOptions);
        directionsDisplay.setMap(map);

        makeMarkers(rtl_data)

        function makeMarkers(rtl_data){
            // Drivers Location Markers
            deleteMarkers()
            features = []
            marker = []
            drivers_latlng = rtl_data.drivers_latest_location
            drivers_latlng.forEach(function(e){
                features.push({
                    position: new google.maps.LatLng(e.lat, e.lng),
                    type: e.order_id,
                    title: e.driver_id,
                    description: e.order_id ? "Ongoing order: "+e.order_id : "No order assigned."
                })
            })

            image = "/files/truck.png"
            infoWindow = new google.maps.InfoWindow();
            for (i = 0; i < features.length; i++) {
                marker = new google.maps.Marker({
                    position: features[i].position,
                    map: map,
                    title: features[i].title,
                    type: features[i].type,
                    icon: image,
                    description: features[i].description
                });
                //Attach click event to the marker.
                (function (marker) {
                    google.maps.event.addListener(marker, "click", function (e) {
                        //Wrap the content inside an HTML DIV in order to set height and width of InfoWindow.
                        infoWindow.setContent("<div style = 'width:200px;min-height:40px'>" + marker.description + "</div>");
                        infoWindow.open(map, marker);
                    });
                })(marker);
            }

            // Sets the map on all markers in the array.
            function setMapOnAll(map) {
                for (var i = 0; i < marker.length; i++) {
                    marker[i].setMap(map);
                }
            }

            // Removes the markers from the map, but keeps them in the array.
            function clearMarkers() {
                setMapOnAll(null);
                console.info('clearMarkers')
            }

            // Shows any markers currently in the array.
            function showMarkers() {
                setMapOnAll(map);
            }

            // Deletes all markers in the array by removing references to them.
            function deleteMarkers() {
                console.info('deleteMarkers')
                clearMarkers();
                marker = [];
            }
        }

        // Fetch Realtime using time interval
        setInterval(function() {
            frappe.call({ // Simple AJAX Call which returns locations and location realated data.
                method: "get_drivers_locations",
                async: false,
                callback: function(r){
                    rtl_data = r.message
                }
            })
            makeMarkers(rtl_data)
        }, 5000);

Я уже использовал метод, который используется в документации Google Map. Используя ClearMarkers, старые маркеры очищаются. Но в моем случае это не работает. Когда я запускаю код выше, он отображает как старые, так и обновленные маркеры.

См. скриншот ниже, на котором повторяются маркеры с обновленными местоположениями. Как удалить старые маркеры карты и обновить новые в Google Maps

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
0
1 383
3

Ответы 3

Вы инициализируете маркер как массив:

var marker = []

Но позже назначьте экземпляр Marker:

marker = new google.maps.Marker({...})

Я не запускал ваш пример, но ожидаю, что переменная marker будет содержать не массив маркеров, а последний созданный маркер.

Попробуйте сделать следующее:

  1. переименовать переменную маркера в markers
  2. реализовать функцию addMarker. Эта функция должна поместить новый маркер в массив маркеров.

Нет, вы можете обратиться к официальной документации: (из Google) Developers.google.com/maps/documentation/javascript/examples‌​/…

Abhijit Kumbhar 26.03.2019 09:32

В примере создается новый экземпляр маркера, который затем помещается в массив маркеров: markers.push(marker); Пожалуйста, обратите внимание на функцию addMarker.

user34813 26.03.2019 09:49

Это не дает ответа, поэтому, вероятно, это должен быть комментарий.

Cat 26.03.2019 09:49

После прочтения темы ниже: Google Map API — удаление маркеров Я нашел решение. Я создал один массив.

gmarkers = []

и вставил в него все свои новые маркеры.

gmarkers.push(marker)

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

function setMapOnAll(map) {
    for (var i = 0; i < gmarkers.length; i++) {
        gmarkers[i].setMap(map);
    }
}

Да, кажется, ответ ниже был правильным.

Alex 26.03.2019 10:53

Ваша закрывающая скобка для функции инициализации неверна. Если вы посмотрите на исходную документацию, функция инициализации закрывается перед функцией addmarker. В вашем примере он закрывается непосредственно перед setInterval. Таким образом, ваш setInterval, вероятно, не может даже получить доступ к функции makeMarker, потому что она находится внутри другой функции.

Другие вопросы по теме