谷歌地图 - 更新前删除标记答案

【问题标题】：Google Maps - Remove markers before update谷歌地图 - 更新前删除标记
【发布时间】：2015-01-30 22:53:15
【问题描述】：

我正在从 JSON 文件中添加多个标记。它的工作原理是：有一个带有一些地址的 JSON 商店列表。我提供了输入框，用户可以在其中输入任何邮政地址。现在无论用户将插入什么地址，谷歌地图都会根据该地址添加标记（如果距离小于 10 公里）。这是代码：

var map;
var bounds = new google.maps.LatLngBounds();
var mapOptions = {
   zoom: 6
};

map = new google.maps.Map(document.getElementById('map_canvas'),
      mapOptions);

$(".search-btn").click(function(){

   $.getJSON('path to json', function(data) { 
       $.each( data.markers, function(i, value) { 

        var geocoder = new google.maps.Geocoder();
        var postal = $("#postal").val(); //Take address from the user

            geocoder.geocode({ 'address': postal }, function (results, status) {
                if (status == google.maps.GeocoderStatus.OK) {

                    var platitude = results[0].geometry.location.lat();
                    var plongitude = results[0].geometry.location.lng();

                    //calculate distance
                      var plat1 = Math.PI * platitude/180;
                      var plat2 = Math.PI * value.latitude/180;
                      var plon1 = Math.PI * plongitude/180;
                      var plon2 = Math.PI * value.longitude/180;
                      var ptheta = plongitude-value.longitude;
                      var pradtheta = Math.PI * ptheta/180;
                      var pdist = Math.sin(plat1) * Math.sin(plat2) + Math.cos(plat1) * Math.cos(plat2) * Math.cos(pradtheta);
                      pdist = Math.acos(pdist);
                      pdist = pdist * 180/Math.PI;
                      pdist = pdist * 60 * 1.1515;
                      pdist = pdist * 1.609344;
                      if(pdist<10){

        var postalLatlang = new google.maps.LatLng(value.latitude, value.longitude);

        var marker = new google.maps.Marker({
            position: postalLatlang,
            map: map,
            title: value.content
            });
            bounds.extend(marker.position);

        map.fitBounds(bounds);

      } 
                } else {
                    alert("Request failed.");
                }
            });
        }); 
    });
  });

它工作得很好。但问题是，当用户再次搜索（使用一个邮政地址搜索后）时，标记没有得到更新。它只是添加另一个标记。

那么如何在每次点击搜索时删除/清除标记？有什么办法吗？我已经浏览了 Google 文档，但我无法以正确的方式完成它。

注意：我需要坚持使用 JSON 文件来添加标记。

【问题讨论】：

如何在地图上保留相同的标记，但只使用 marker.setPosition(newPosition) 更改其位置（newPosition 将是您的 new google.maps.LatLng(lat, lng)）
除此之外还有什么办法吗？因为我猜它有点棘手:)

标签： javascript json google-maps google-maps-api-3 google-maps-markers

【解决方案1】：

您可以将标记存储在一个数组中，当您想删除它们时，创建一个循环并

markers[i].setMap(null);

这是how google does it

希望对你有帮助。

【讨论】：

setMap 是函数还是在谷歌地图中是全局的？
我应该在哪里添加上面的行？循环将如何工作？因为我的地图是基于点击事件..
var markers = []; markers.push(marker); for (var i = 0; i < markers.length; i++) { markers[i].setMap(map); } 我做了这么多..
查看我的答案中包含的链接，使用它们在那里执行的功能，在这种情况下，我会在$(".search-btn").click(function(){ 之后调用clearMarkers()
我猜它在本地工作..:) 我会在再试一次后接受这个答案。 :) 谢谢你的时间老兄..

【解决方案2】：

通过重建地图。你不要保留一组标记，所以你必须“破解”它

var map;
var bounds = new google.maps.LatLngBounds();
var mapOptions = {
zoom: 6
};

map = new google.maps.Map(document.getElementById('map_canvas'),
  mapOptions);

$(".search-btn").click(function(){
map = new google.maps.Map(document.getElementById('map_canvas'),
  mapOptions);
$.getJSON('path to json', function(data) { 
   $.each( data.markers, function(i, value) { 

    var geocoder = new google.maps.Geocoder();
    var postal = $("#postal").val(); //Take address from the user

        geocoder.geocode({ 'address': postal }, function (results, status) {
            if (status == google.maps.GeocoderStatus.OK) {

                var platitude = results[0].geometry.location.lat();
                var plongitude = results[0].geometry.location.lng();

                //calculate distance
                  var plat1 = Math.PI * platitude/180;
                  var plat2 = Math.PI * value.latitude/180;
                  var plon1 = Math.PI * plongitude/180;
                  var plon2 = Math.PI * value.longitude/180;
                  var ptheta = plongitude-value.longitude;
                  var pradtheta = Math.PI * ptheta/180;
                  var pdist = Math.sin(plat1) * Math.sin(plat2) + Math.cos(plat1) * Math.cos(plat2) * Math.cos(pradtheta);
                  pdist = Math.acos(pdist);
                  pdist = pdist * 180/Math.PI;
                  pdist = pdist * 60 * 1.1515;
                  pdist = pdist * 1.609344;
                  if(pdist<10){

    var postalLatlang = new google.maps.LatLng(value.latitude, value.longitude);

    var marker = new google.maps.Marker({
        position: postalLatlang,
        map: map,
        title: value.content
        });
        bounds.extend(marker.position);

    map.fitBounds(bounds);

  } 
            } else {
                alert("Request failed.");
            }
        });
    }); 
});
});

添加

map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);

在按钮点击事件之后。

【讨论】：

【解决方案3】：

这是我认为移动标记的方法

  var map;
  var bounds = new google.maps.LatLngBounds();
  var mapOptions = {
     zoom: 6
  };

  map = new google.maps.Map(document.getElementById('map_canvas'),
        mapOptions);

  var marker = new google.maps.Marker({
                  map: map
              });

  $(".search-btn").click(function(){

     $.getJSON('path to json', function(data) { 
         $.each( data.markers, function(i, value) { 

          var geocoder = new google.maps.Geocoder();
          var postal = $("#postal").val(); //Take address from the user

              geocoder.geocode({ 'address': postal }, function (results, status) {
                  if (status == google.maps.GeocoderStatus.OK) {

                      var platitude = results[0].geometry.location.lat();
                      var plongitude = results[0].geometry.location.lng();

                      //calculate distance
                        var plat1 = Math.PI * platitude/180;
                        var plat2 = Math.PI * value.latitude/180;
                        var plon1 = Math.PI * plongitude/180;
                        var plon2 = Math.PI * value.longitude/180;
                        var ptheta = plongitude-value.longitude;
                        var pradtheta = Math.PI * ptheta/180;
                        var pdist = Math.sin(plat1) * Math.sin(plat2) + Math.cos(plat1) * Math.cos(plat2) * Math.cos(pradtheta);
                        pdist = Math.acos(pdist);
                        pdist = pdist * 180/Math.PI;
                        pdist = pdist * 60 * 1.1515;
                        pdist = pdist * 1.609344;
                        if(pdist<10){

          var  postalLatlang = new google.maps.LatLng(value.latitude, value.longitude);

              marker.setTitle(value.content);
              marker.setPosition(postalLatlang)

              bounds.extend(marker.position);

              map.fitBounds(bounds);

        } 
                  } else {
                      alert("Request failed.");
                  }
              });
          }); 
      });
    });`

【讨论】：