Question

我正在从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文件添加标记。

Answer 1

您可以将标记存储在数组中，当您想要删除它们时，请进行循环和

markers[i].setMap(null);

这是how google does it

希望它有所帮助。

Answer 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);

按钮点击事件后

。

Answer 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.");
                  }
              });
          }); 
      });
    });`

Google地图 - 在更新前删除标记

3 个答案: