简体   繁体   中英

How to remove all markers from google map before adding new ones

There is an asp.net web form to show the location of a moving object in google map. According to a given interval it fetches the current location of the object from the database and update it on the map.

Everything works fine. But per each interval it adds same markers on top of the previous ones. I want to clear the markers on the map before fetch the current data from database. I used markers.setMap(null) before calling current values. Then it doesn't show any marker on the map. Any help would be appreciated.

    window.onload = function () {
        LoadGoogleMap();
    }

    var markers = [];
    var map;
    function LoadGoogleMap() {
         markers = GetMapData();
        var mapOptions = {
            center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
            zoom: 8,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var infoWindow = new google.maps.InfoWindow();
         map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);

        setInterval(SetMarker, 5000);
    }

function SetMarker() {

        //markers.setMap(null)

        markers = [];
        markers = GetMapData();
        for (i = 0; i < markers.length; i++) {
            var data = markers[i]
            var myLatlng = new google.maps.LatLng(data.lat, data.lng);
            var icon = "";
            icon = data.color;
            icon = "http://maps.google.com/mapfiles/ms/icons/" + icon + ".png";
            var marker = new google.maps.Marker({
                position: myLatlng,
                map: map,
                title: data.Name,
                icon: new google.maps.MarkerImage(icon)
            });

        } 
       };

 function GetMapData() {
        var json = '';
        $.ajax({
            type: "POST",
            url: "WebForm4.aspx/GetData",
            data: "{}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            async: false,
            success: function (resp) {
                json = resp.d;
            },
            error: function () { debugger; }
        });
        return json;
    }

I found the answer as follows....

<script type="text/javascript">
    window.onload = function () {
        LoadGoogleMap();
    }


    var markers;
    var map;
    var markers1 = [];
    function LoadGoogleMap() {
        var mapOptions = {
            center: new google.maps.LatLng('6.894373', '79.857963'),
            zoom: 8,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var infoWindow = new google.maps.InfoWindow();
        map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
        setInterval(SetMarker, 3000);

    }


    function SetMarker() {

        for (i = 0; i < markers1.length; i++) {
            markers1[i].setMap(null);
        }
        markers1 = [];
        markers = [];
        markers = GetMapData();

        for (i = 0; i < markers.length; i++) {

            var data = markers[i]
            var myLatlng = new google.maps.LatLng(data.lat, data.lng);
            var icon = "";
            icon = data.color;
            icon = "http://maps.google.com/mapfiles/ms/icons/" + icon + ".png";
            var marker = new google.maps.Marker({
                position: myLatlng,
                map: map,
                title: data.Name,
                icon: new google.maps.MarkerImage(icon)
            });
            markers1.push(marker);
            //var infoWindow = new google.maps.InfoWindow();
            //infoWindow.setContent("<div style = 'width:50px;min-height:20px'>" + data.Description + "</div>");
            //infoWindow.open(map, marker);
        }
    };


    function GetMapData() {
        var json = '';
        $.ajax({
            type: "POST",
            url: "WebForm5.aspx/GetData",
            data: "{}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            async: false,
            success: function (resp) {
                json = resp.d;
            },
            error: function () { debugger; }
        });
        return json;
    }



</script>

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM