Question

我希望在某个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

            });
        }
    });  
});

这就是我在完成所有这些后初始化谷歌地图的方式：

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);
});

}

Answer 1

var mapMarkers = [];宣布全球
将标记推送到mapMarkers数组。
在ajax回调中，循环mapMarkers数组中的所有标记，并将其map属性设置为null。

清除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


            });
        }
    });  
});

谷歌地图，清晰的标记

1 个答案: