谷歌地图，清除标记

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

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