Гугл карты, четкие маркеры

Я хочу удалить все существующие маркеры с моей карты, когда завершится определенный вызов ajax. Я опубликую код API и мой код ajax:

Я загружаю свою карту в начале скрипта так:

<script type="text/javascript">

//SETTINGS
$(document).ready(function() {

// Asynchronously Load the map API
var script = document.createElement('script');
script.src = "http://maps.googleapis.com/maps/api/js?sensor=false&callback=initialize";
document.body.appendChild(script);

Затем я делаю некоторые вещи через ajax, а затем в конце завершенного вызова ajax хочу выполнить очистку моих маркеров. Посмотрите на комментарий:

//AJAX AUTOCOMPLETE PLUGIN
var a = $('#searchMap2').autocomplete({
serviceUrl: '/public/index.php/prodajna_mesta/search',
minChars: 1,
delimiter: /(,|;)\s*/, // regex or character
//params: { country:'Yes' }, //aditional parameters
noCache: false, //default is false, set to true to disable caching
// callback function:
onSelect: function(suggestion) {

$.ajax({
url: "/public/index.php/prodajna_mesta/coords",
context: document.body,
data: { coords: suggestion.data }
}).done(function(data) {

//CLEAR MY MARKERS HERE

});
}
});
});

И вот как я инициализирую карту Google после всего этого:

function initialize() {

var bounds = new google.maps.LatLngBounds();
var mapOptions = {
mapTypeId: 'roadmap'
};

// Display a map on the page
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
map.setTilt(45);

// Multiple Markers
var markers = [

<?php foreach ($records as $value): ?>
<?php $records = (array)$records; ?>
['<?php echo $value->name ?>', <?php echo $value->coords ?>],
<?php endforeach; ?>

];

// Info Window Content
var infoWindowContent = [

<?php foreach ($records as $value): ?>
<?php $records = (array)$records; ?>
['<div style="height: 80px; white-space: nowrap;" class="info_content"><b><?php echo $value->name; ?></b><br/><br/><?php echo $value->address; ?><br/>T: <?php echo $value->phone; ?></div>'],
<?php endforeach; ?>

];

// Display multiple markers on a map
var infoWindow = new google.maps.InfoWindow(), marker, i;

// Loop through our array of markers & place each one on the map
for( i = 0; i < markers.length; i++ ) {
var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
bounds.extend(position);
marker = new google.maps.Marker({
position: position,
map: map,
title: markers[i][0]
});

// Allow each marker to have an info window
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infoWindow.setContent(infoWindowContent[i][0]);
infoWindow.open(map, marker);
}
})(marker, i));

// Automatically center the map fitting all markers on the screen
map.fitBounds(bounds);
}

// Override our map zoom level once our fitBounds function runs (Make sure it only runs once)
var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) {
this.setZoom(9);
google.maps.event.removeListener(boundsListener);
});

}

2

Решение

  1. var mapMarkers = []; Объявите это глобальным
  2. выдвинуть маркеры в массив mapMarkers.
  3. В обратном вызове ajax зациклите все маркеры в массиве mapMarkers и установите для их свойства map значение null.
  4. очистить массив mapMarkers.

    var mapMarkers = []; //STEP 1 Global, so that it can be accessed from ajax success callback
    
    function initialize() {
    
    var bounds = new google.maps.LatLngBounds();
    var mapOptions = {
    mapTypeId: 'roadmap'
    };
    
    // Display a map on the page
    map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
    map.setTilt(45);
    
    // Multiple Markers
    var markers = [
    
    <?php foreach ($records as $value): ?>
    <?php $records = (array)$records; ?>
    ['<?php echo $value->name ?>', <?php echo $value->coords ?>],
    <?php endforeach; ?>
    
    ];
    
    // Info Window Content
    var infoWindowContent = [
    
    <?php foreach ($records as $value): ?>
    <?php $records = (array)$records; ?>
    ['<div style="height: 80px; white-space: nowrap;" class="info_content"><b><?php echo $value->name; ?></b><br/><br/><?php echo $value->address; ?><br/>T: <?php echo $value->phone; ?></div>'],
    <?php endforeach; ?>
    
    ];
    
    // Display multiple markers on a map
    var infoWindow = new google.maps.InfoWindow(), marker, i;// Loop through our array of markers & place each one on the map
    for( i = 0; i < markers.length; i++ ) {
    var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
    bounds.extend(position);
    marker = new google.maps.Marker({
    position: position,
    map: map,
    title: markers[i][0]
    });
    
    mapMarkers.push(marker); //STEP 2
    
    // Allow each marker to have an info window
    google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {
    infoWindow.setContent(infoWindowContent[i][0]);
    infoWindow.open(map, marker);
    }
    })(marker, i));
    
    // Automatically center the map fitting all markers on the screen
    map.fitBounds(bounds);
    }
    
    // Override our map zoom level once our fitBounds function runs (Make sure it only runs once)
    var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) {
    this.setZoom(9);
    google.maps.event.removeListener(boundsListener);
    });
    
    }//AJAX AUTOCOMPLETE PLUGIN
    var a = $('#searchMap2').autocomplete({
    serviceUrl: '/public/index.php/prodajna_mesta/search',
    minChars: 1,
    delimiter: /(,|;)\s*/, // regex or character
    //params: { country:'Yes' }, //aditional parameters
    noCache: false, //default is false, set to true to disable caching
    // callback function:
    onSelect: function(suggestion) {
    
    $.ajax({
    url: "/public/index.php/prodajna_mesta/coords",
    context: document.body,
    data: { coords: suggestion.data }
    }).done(function(data) {
    
    //CLEAR MY MARKERS HERE
    //STEP 3
    
    var len = mapMarkers.length;
    for(var i=0; i<len; i++){
    mapMarkers[i].setMap(null);
    }
    mapMarkers = []; //Empty the array});
    }
    });
    });
    
4

Другие решения

Других решений пока нет …

По вопросам рекламы [email protected]