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

Question

我正在编写一个接受地址、州或邮政编码的程序。查询我们的数据库获取结果并使用 Google Maps API 将它们推送到 map 和标记。

这是向页面添加标记的函数:

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 = [];

然后在创建标记时，将它们存储在数组中，同时将它们分配给 map 。

hotSpotMapMarkers.push(<your marker object>);

然后，下次刷新 map 时，先移除所有标记。像这样:

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

这段代码来 self 编写的一个应用程序，它正是这样做的。顺便说一下，有很多示例可以通过使用 Google 找到，这些示例说明了如何执行此操作。