时间戳

首页 > 解决方案 > 如何在使用新地图刷新之前清除谷歌地图标记？

asp.net-mvc - 如何在使用新地图刷新之前清除谷歌地图标记？

问题描述

有人可以分享我如何在用一组新的标记刷新之前清除谷歌地图中的标记吗？

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

项目：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>

标签： asp.net-mvcgoogle-mapsasp.net-mvc-4google-maps-api-3

解决方案

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

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 = [];
}

推荐阅读