Как динамически удалять маркеры с помощью Google Maps API?
Я пишу программу, которая принимает адрес, штат или почтовый индекс. Запросы к нашей базе данных берут результаты и отправляют их на карты и маркеры с помощью 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 и неупорядоченного списка. Я передаю количество строк во внутренний HTML-код скрытого элемента div «#row_c», а затем выполняю цикл, который захватывает все адреса из каждого элемента 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», это замечательно, все работает отлично. Но если тот же пользователь хочет искать что-то еще — скажем, определенный почтовый индекс в Калифорнии — он выполняет поиск, но все предыдущие маркеры все еще там, что делает его второй поиск бессмысленным.
Решение
Сначала вам нужно сохранить все ваши маркеры в массиве.
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, которые показывают, как это сделать.
Другие решения
for (var i = 0, marker; marker = markers[i]; i++) {
marker.setMap(null);
}