Question

有人能和我分享一下如何在使用新的标记刷新之前清除Google地图中的标记吗？

在我的地图中，我要从包含名称，纬度和经度的数组中添加标记。可以从下拉菜单中选择名称，然后将该名称的所有标记添加到页面中。

Prtoject：Asp.Net Mvc 链接图片：https://i.hizliresim.com/V927Py.jpg

当用户添加标记时，将保留先前的一组标记。我想在添加新集合之前删除所有现有标记。

阅读文档后，我尝试了以下方法：

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
@model List<Project_Map.Models.KONUM>

<html>
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Complex Marker Icons</title>
    <style>
        /* Always set the map height explicitly to define the size of the div
            * element that contains the map. */
        #map {
            height: 100%;
        }
        /* Optional: Makes the sample page fill the window. */
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
    <style>
        #map_wrapper {
            height: 700px;
        }

        #map_canvas {
            width: 100%;
            height: 100%;
        }
    </style>
    <div id="map_wrapper">
        <div class="mapping" id="map_canvas">
            &nbsp;
        </div>
    </div>

    <div id="map"></div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

    <script>
        jQuery(function ($) {
            var script = document.createElement('script');
            script.src = "https://maps.googleapis.com/maps/api/js?key=AIzaSyBT56XlfxnK2OB4K93vWdrZci_CKjZyQOM&callback=initMap";
            document.body.appendChild(script);
        });
    </script>

    <!-- Google Maps Kodu -->
    <script type="text/javascript">

            var contentString = '<div id="content">' +
                '<div id="siteNotice">' +
                '<img src="#IMG_SRC#" />' +
                '</div>' +
                //'<h2 id="firstHeading" class="firstHeading">#PERSONEL#</h2>' +
                '<div id="bodyContent">' +
                '<b>Mesafe: </b>#MESAFE# Km<br />' +
                '<b>Tarih: </b> #TARIH#' +
                '</p>' +
                '</div>' +
                '</div>';

            $(document).ready(function () {
                initMap();
            });


            function initMap() {

                var mapCenter = { lat: 39.684536, lng: 35.337094 };


                var map = new google.maps.Map(document.getElementById('map_wrapper'), {
                    zoom: 6,// haritanın yakınlık derecesi
                    center: mapCenter, // haritanın merkezi
                    mapTypeId: google.maps.MapTypeId.HYBRID
                });


                var infoWindow = new google.maps.InfoWindow();

                setInterval(function () {
                   $.ajax({
                      url: '@Url.Action("GetMapLocations", "Konum")',
                      type: "POST",
                      success: function (data) {

                             var json = JSON.parse(data);
                             for (var i = 0; i < json.length; i++) {
                                 var position = {
                                     lat: parseFloat(json[i].lat.replace(',', '.')),
                                     lng: parseFloat(json[i].lng.replace(',', '.'))
                                 };
                                 var marker = new google.maps.Marker({
                                     position: position,
                                     animation: google.maps.Animation.BOUNCE,
                                     map: map,

                                 });
                                 // infoWindow içeriğini replace et
                                 var cs = contentString;
                                 cs = cs.replace("#PERSONEL#", json[i].name);
                                 cs = cs.replace("#MESAFE#", json[i].mesafe);
                                 cs = cs.replace("#TARIH#", json[i].tarih);
                                 cs = cs.replace("#IMG_SRC#", json[i].img);

                                 google.maps.event.addListener(marker, 'click', (function (marker, cs, infoWindow) {
                                     return function () {
                                         infoWindow.setContent(cs);
                                         infoWindow.open(map, this);
                                         passive: true;
                                     };
                                 })(marker, cs, infoWindow));
                             };

                      },
                           error: function (data) { alert("Malesef Sunucunuza Ulaşamıyoruz. Lütfen Tekrar Deneyiniz..."); },
                   });
                }, 5000);
            };
    </script>
</body>
</html>

Answer 1

您必须设置一个数组，您可以在其中存储添加的标记

var gmarkers = [];

如果添加标记，则必须将标记对象存储在数组中。

gmarkers.push(marker);

如果要删除这些标记，可以使用类似以下内容的

：

function removeMarker() {
if (gmarkers.length > 0) {
    for (var i=0; i<gmarkers.length; i++) {
        if (gmarkers[i] != null) {
            gmarkers[i].setMap(null);
        }
    }
}
gmarkers = [];
}

如何在刷新新地图之前清除Google地图标记？

1 个答案: