如何使用Google Maps API动态删除标记？

Question

我正在编写一个包含地址，州或邮政编码的程序。 查询我们的数据库以获取结果，并使用Google Maps API将其推送到地图和标记。

这是向页面添加标记的功能：

function codeAddress(address) {

  geocoder.geocode( { 'address': address}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      map.setCenter(results[0].geometry.location);
      var marker = new google.maps.Marker({
          map: map,
          position: results[0].geometry.location
      });

    } else {
      alert('Geocode was not successful for the following reason: ' + status);
    }
  });
}

这是我将地址推送到函数的方式：

function get_matches()
       {
           var info_ = document.getElementById('address').value; 
    $.ajax({ url: 'find_store.php',
         data: {info: info_},
         type: 'get',
         success: function(output) {
                         var html = output;
                        $('#dress').html(html);
                               var  num =$('#row_c').html();
                               var counter = 0;
                               while(counter < num)
                               {
                                   var addr = $('.addre#'+ counter).html();
                                   codeAddress(addr);

                                   counter++;
                               }
                                       }
});

} 

基本上，根据此函数的输入，它将返回正确的存储输出，并将它们输出到div和无序列表中。 我将行数传递给隐藏的div“ #row_c”的内部HTML，然后运行一个循环，该循环从输出到屏幕的每个div抓取所有地址。

这是当用户输入状态缩写时如何获取信息的示例。

else if($type == 2)
      {
          $row_count = 0;
          $z_query = "select * from store_table where state like '%$accept%' and address like '%$accept%' limit 10";
          $result = mysql_query($z_query);
          $num_rows = mysql_num_rows($result);
          if($num_rows == 0)
          {
            echo"<script>alert(\"Your State look-up was unsuccessful, please try again\")</script>";

          }
          $width = ($num_rows * 300)."px";
          if($num_rows > 0)
          {
              echo"<div id = 'state_container' style = \" margin:none; height:200px; backround-color:hsl(0,0%,95%);  position:relative; padding:0px; overflow-x:hidden; overflow-x:scroll; overflow-y:none;\">";
              echo"<ul style = 'list-style-type:none;  margin-top:0px; margin-left:0px; padding-left:0px; width:$width;'>";
              while($row = mysql_fetch_assoc($result))
              {
                  $state = "".$row['state']."";
                  $store = "".$row['store_name']."";
                  $phone = "".$row['phone']."";
                  $addr = "".$row['address']."";
                  $website = "".$row['website']."";
                  $state = preg_replace('/\s+/', '', $state);
                  $phone = preg_replace('/\s+/', '', $phone);
                  $website = preg_replace('/\s+/', '', $website);
                  $state = stripslashes($state);
                  $store = stripslashes($store);
                  $phone = stripslashes($phone);
                  $addr = stripslashes($addr);
                  $website = stripslashes($website);




                  echo"<li style = 'float:left; margin:none; margin-left:5px; margin-right:10px;'>";
                  echo"<br/><b>$store</b>";
                  echo"<br />$phone";
                  echo"<br /><div class = 'addre' id = '$row_count' style = 'margin:0px; padding:0px;'>$addr</div>";
                  echo"<br /><a href='$website' style = 'color:#000000; text-decoration:none;'>$website</a>";
                  echo"</li>";



                 $row_count++; 
              }
              echo"<script>$('#row_c').html($row_count)</script>";
              echo"</ul>";
              echo"</div>";
          }

      } 

如何删除以前的标记？ 例如，如果用户去搜索“ CA”，那很好，那么一切就很好而且很花哨。 但是，如果同一用户想要搜索其他内容（例如，加利福尼亚州的特定邮政编码），它会进行搜索，但所有先前的标记仍然存在，从而使第二次搜索毫无意义。

Answer 1

首先，您需要将所有标记存储在数组中。

var hotSpotMapMarkers = [];

然后，当您创建标记时，会将它们存储在数组中，同时将它们分配给地图。

hotSpotMapMarkers.push(<your marker object>);

然后，下次您刷新地图时，请先删除所有标记。 像这样：

// Clear all markers currently on the map
for (var i = 0; i < hotSpotMapMarkers.length; i++)
    hotSpotMapMarkers[i].setMap(null);

这段代码来自我编写的一个应用程序。 顺便说一句，可以通过使用Google找到很多示例，这些示例演示了如何执行此操作。

Answer 2

for (var i = 0, marker; marker = markers[i]; i++) { marker.setMap(null); }