如何使用Google Maps API动态删除标记？ [英] How to remove markers dynamically with Google Maps API?
问题描述
我正在编写一个接收地址，州或邮政编码的程序。查询我们的数据库获取结果并使用Google Maps API将它们推送到地图和标记。
I'm writing a program that take in an address, state, or zip code. Queries our database take the results and push them to maps and markers with Google Maps API.
以下是向页面添加标记的功能：
Here is the function to add a marker to the page:
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);
}
});
}
以下是我将地址推送到函数的方法：
Here is how I'm pushing the addresses to the function:
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的所有地址。
Basically with this function according to their input it will return the correct store outputs them into a div and unordered list. I'm passing the number of rows to the inner HTML of a hidden div "#row_c" then I run through a loop which grabs all the addresses from every div outputted to the screen.
以下是我如何获取用户输入州名缩写的信息的示例。
Here is an example of how I get the information for when a user inputs the state abbreviation.
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，那么一切都很好，花花公子。但是如果同一个用户想要搜索其他任何内容 - 比如加利福尼亚州的特定邮政编码 - 它会进行搜索，但所有以前的标记仍然存在，使得他们的第二个搜索毫无意义。
How can I delete previous markers? For example if a user goes and searches 'CA' that's great everything works fine and dandy. But if the same user want to search anything else - let's say a specific zip code in California - it does the search but all the previous markers are still there, making their second search pointless.
推荐答案
首先，您需要将所有标记存储在数组中。
First you need to store all your markers in an array.
var hotSpotMapMarkers = [];
然后在创建标记时，在将它们分配给数组的同时将它们存储在数组中地图。
Then as you create your markers, you store them in the array at the same time you assign them to the map.
hotSpotMapMarkers.push(<your marker object>);
然后，下次刷新地图时，首先删除所有标记。这样的事情：
Then, the next time you refresh your map, remove all the markers first. Something like this:
// Clear all markers currently on the map
for (var i = 0; i < hotSpotMapMarkers.length; i++)
hotSpotMapMarkers[i].setMap(null);
此代码来自我编写的应用程序。顺便说一句，有很多例子可以通过谷歌找到，它们展示了如何做到这一点。
This code is from an app I've written that does exactly this. By the way, there are plenty of examples, which can be found by using Google, that shows how to do this.
这篇关于如何使用Google Maps API动态删除标记？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
