php - 谷歌地图，清晰标记

Question

我想在某些 ajax 调用完成时清除 map 中的所有现有标记。我将发布API代码和我的ajax代码:

我在脚本开头加载 map ，如下所示:

<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 map 标记 = [];将其声明为全局
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
   
   
               });
           }
       });  
   });