javascript - 在添加新标记之前如何从谷歌地图中删除所有标记

Question

有一个 asp.net Web 表单可以在 google map 中显示移动对象的位置。根据给定的时间间隔，它从数据库中获取对象的当前位置，并将其更新到 map 上。

一切正常。但每个间隔它都会在之前的标记之上添加相同的标记。我想在从数据库获取当前数据之前清除 map 上的标记。我在调用当前值之前使用了markers.setMap(null)。然后它不会在 map 上显示任何标记。任何帮助将不胜感激。

    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;
    }

Answer 1

我找到了答案如下......

<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>