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

【问题标题】：How to remove all markers from google map before adding new ones如何在添加新标记之前从谷歌地图中删除所有标记
【发布时间】：2016-06-20 09:41:02
【问题描述】：

有一个 asp.net 网络表单可以在谷歌地图中显示移动物体的位置。根据给定的时间间隔，它从数据库中获取对象的当前位置并在地图上更新它。

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

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

【问题讨论】：

标签： javascript asp.net google-maps

【解决方案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>

【讨论】：