删除所有显示标记Google API

问题描述 投票:0回答:1

我在Laravel项目工作,如果我只选择一家商店,我有用于在Google地图上显示和删除所有商店的模块。

这是一个重复的问题,但是,为什么我的函数不工作将函数showallmarks设置为null。

问题:如果单击按钮,如何删除谷歌地图中显示的所有标记?

我这里有代码。

显示所有标记:

showallmarks();

function showallmarks() {
  $.each(locations, function(index, value) {

    var position = new google.maps.LatLng(value.store_lat, value.store_long);
    var title = value.branch_name;
    var address = value.store_address;

    var contentString = "<h5>" + title + "</h5>" + address;

    var infowindow = new google.maps.InfoWindow({
      content: contentString
    });

    var marker = new google.maps.Marker({
      position: position,
      icon: google.maps.marker,
      map: map,
      zoom: 12
    });

    marker.addListener('click', function() {
      infowindow.open(map, marker);
    });
  });
}

单击此按钮后,showallmarks不得显示在Google地图上。

var markeronce;

$('button#addresses').click(function() {

  //removing all marks 
  showallmarks(null);

  var infowindow = new google.maps.InfoWindow({
    content: "<span>Visit us on our store.</span>"
  });
  var address_href = $(this).val();
  var commaPos = address_href.indexOf(',');
  var coordinatesLat = parseFloat(address_href.substring(0, commaPos));
  var coordinatesLong = parseFloat(address_href.substring(commaPos + 1, address_href.length));

  var centerPoint = new google.maps.LatLng(coordinatesLat, coordinatesLong);


  if (!markeronce) {
    markeronce = new google.maps.Marker({
      position: centerPoint,
      map: map,
      zoom: 8
    });
  } else {
    markeronce.setPosition(centerPoint);
  }
  map.setCenter(centerPoint);
})

Sample Image

javascript php laravel google-maps
1个回答
0
投票

像添加按钮一样

  <input type="button" value="Delete" onclick="DeleteMarkers()" />

并尝试此功能

    <script type="text/javascript">
    var markers = [];

    function DeleteMarkers() {
            //Loop through all the markers and remove
            for (var i = 0; i < markers.length; i++) {
                markers[i].setMap(null);
            }
            markers = [];
        };
    </script>
© www.soinside.com 2019 - 2024. All rights reserved.