如何删除标记googlemap $ .getjson

时间:2014-01-18 17:35:00

标签: javascript jquery json google-maps google-maps-api-3

我有一个大问题!! 我通过$ .getJSON动态添加新标记 但我想要一个函数删除地图上的所有标记。 这是因为我想在使用函数xx3

动态添加新标记之前使用此函数作为删除标记
     <script type="text/javascript"
      src="http://maps.googleapis.com/maps/api/js?keyenter code here=true">
    </script>
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript">
      var map;
      function initialize() {
        var mapOptions = {
          center: new google.maps.LatLng(40.76455136505513, -73.98056030273438),
          zoom: 13,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById("map_canvas"),
            mapOptions);
      }
    </script>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>    
  </head>
  <body onload="initialize()">
  <div id='map-ui'>
    <ul>
        <li><a onclick="javascript:xx3()" id='find here'>FIND HERE</a></li>
        <li><a onclick="javascript:muovi()" id='filter-foodx'>skate</a></li>
        <li><a onclick="javascript:xx4()" id='filter-foodx'>shop</a></li>
        <li><a onclick="javascript:tutto()" class="active" id='filter-alxl'>show all events</a></li>
    </ul>
</div>
    <div id="map_canvas" style="width:100%; height:100%"></div>
    <script type="text/javascript">
      $(document).ready(function() {
        $.getJSON("/vaij.php?la=40.76455136505513&lg=-73.98056030273438", function(json1) {
          $.each(json1, function(key, data) {
            var latLng = new google.maps.LatLng(data.la, data.lg); 
            // Creating a marker and putting it on the map
            var marker = new google.maps.Marker({
                position: latLng,
                title: data.namesp
            });
            marker.setMap(map);
          });
        });
      });
    </script>
    <script>

    function clearMarkers() {
  new google.maps.Marker(null);
}

function muovi() {

      var latLng = new google.maps.LatLng(45.59426285330727 , 8.918224610396585); //Makes a latlng
      map.panTo(latLng); //Make map global
  }



    function xx3() {




    $.getJSON("/vaij.php?la=45.59426285330727&lg=8.918224610396585", function(json1) {
        var markers = [];
          $.each(json1, function(key, data) {
            var latLng = new google.maps.LatLng(data.la, data.lg); 
            // Creating a marker and putting it on the map
            var marker = new google.maps.Marker({
                position: latLng,
                title: data.namesp
            });
            marker.setMap(map);
          });
        });

}

function xx4() {
    map.clearOverlays();


var markersArray = [];

function clearOverlays() {
  if (markersArray) {
    for (i in markersArray) {
      markersArray[i].setMap(null);
    }
  }
}
}

    </script>

3 个答案:

答案 0 :(得分:2)

使用您发布的代码作为答案,并在其中一条评论中说明:创建全局标记数组。将每个标记添加到inix函数中的数组中。循环遍历deleteMarkers函数中的标记数组,并为每个标记使用setMap(null)将其删除。

所以,在你的职能之外:

var markers = [];

在inix功能中(创建标记后):

markers.push(marker);

在deleteMarkers函数中:

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

    markers[i].setMap(null);
}

答案 1 :(得分:0)

是的!我考虑过initialize()!但我不想使用另一张地图。 我认为这样的事情:

 <script type="text/javascript">

 var map;
  function initialize() {
    var mapOptions = {
      center: new google.maps.LatLng(40.76455136505513, -73.98056030273438),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map_canvas"),
        mapOptions);
    inix(); 
  }

    var testing ;


    function inix() {

       $.getJSON("/vaij.php?la=40.76455136505513&lg=-73.98056030273438", function(json1) {
          $.each(json1, function(key, data) {
            var latLng = new google.maps.LatLng(data.la, data.lg); 
            // Creating a marker and putting it on the map
            var marker = new google.maps.Marker({
                position: latLng,
                title: data.namesp
            });
            marker.setMap(map);
            testing=marker;
            console.log(testing[0]);
          });
        });
  }
  function deleteMarkers() {


    for (var b=0; b<=10; b++)
   {
   testing.setMap(null);
   }
   }

  </script>

问题是deleteMarkers函数只删除一个标记

答案 2 :(得分:0)

你有没有这样的老大学尝试?

function clearMarkers() {
  setAllMap(null);
}

按照建议here