Дублирующиеся маркеры на Google Map при обновлении данных с помощью ajax - PullRequest
Новая
       5

Дублирующиеся маркеры на Google Map при обновлении данных с помощью ajax

0 голосов
/ 23 октября 2019

Я работаю над Map Javascript API, теперь я могу получать данные с помощью ajax и loop для отображения нескольких маркеров. Однако, когда я попытался добавить функцию setInterval для обновления данных каждые 15 секунд, маркеры продолжают дублироваться и создают бесконечные маркеры вместо обновления текущих маркеров. Я попробовал каждое решение здесь, но я не могу найти правильный способ избежать дублирования данных. Все, что мне нужно, это просто вызывать функцию ajax каждые 15 секунд и обновлять широту и длину маркера, чтобы это выглядело как обновление в реальном времени. Заранее спасибо за помощь в решении этой проблемы. Вот мой код: 

function initMap() {

    var InforObj = [];

    // Create an array of alphabetical characters used to label the markers.
    var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
    var gmarkers = [];

    window.map = new google.maps.Map(document.getElementById('map'), {
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var oms = new OverlappingMarkerSpiderfier(map, {
        markersWontMove: true,
        markersWontHide: true,
        basicFormatEvents: true
    });

    var infowindow = new google.maps.InfoWindow();
    var bounds = new google.maps.LatLngBounds();

    function reload() { 
        $.ajax({
            url: '@Url.Action("GetAllDeviceByAccount", "Device", new { Area = "AccountAdmin" })',
            type: "GET",
            data: {},
            success: function (data) {

                var t = data;
                console.log(t);

                if (t.length !== 0) {
                    $.each(t, function (marker, t) {

                        var icon = {
                            url: t.DevicePic, // url
                            scaledSize: new google.maps.Size(50, 50) // scaled size
                        }

                        var expectedPosition = new google.maps.LatLng(t.Latitude, t.Longitude);

                        marker = new google.maps.Marker({
                            position: expectedPosition,
                            //icon: icon, //set image icon per device
                            label: labels[t % labels.length],
                            map: map
                        });

                        var contentString = '<div id="content"><center><h3 style="color:#000;">' + t.Country +
                            '</h3><p>' + t.DeviceTypeName + '</p></center></div>';

                        const infowindow = new google.maps.InfoWindow({
                            content: contentString,
                            maxWidth: 200
                        });

                        bounds.extend(marker.position);

                        google.maps.event.addListener(marker, 'mouseover', (function (marker) {
                            return function () {
                                closeOtherInfo();
                                infowindow.open(map, marker);
                                InforObj[0] = infowindow;
                            }
                        })(marker, t));

                        oms.addMarker(marker);
                        map.fitBounds(bounds);
                        gmarkers.push(marker);

                    });
                }
                var markerCluster = new MarkerClusterer(map, gmarkers,
                    {
                        imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m',
                        //gridSize: 100,
                        zoomOnClick: true,
                        maxZoom: 10
                    });
            },
            error: function (error) { }
        });
    }
    function closeOtherInfo() {
        if (InforObj.length > 0) {
            InforObj[0].set("marker", null);
            InforObj[0].close();
            InforObj.length = 0;
        }
    }

    var listener = google.maps.event.addListener(map, "idle", function () {
        map.setZoom(3);
        google.maps.event.removeListener(listener);
    });

    setInterval(function () { reload(); }, 15000);

}
...