谷歌地圖，無法清除/隱藏標記

Question

我一直有試圖隱藏/清除我的地圖上的標記的問題。我已經看過Google的文檔，並且我有正確的代碼，我也在這裏看過並看到了一些答案，但似乎沒有任何工作對我來說，我添加了一個清晰的地圖按鈕並創建了一個函數，但是這沒有工作。

另外，我嘗試添加在地理位置方面，但也沒有工作可言，但是當我使用的代碼谷歌的API給它只是不是我用我的代碼來實現它

我不知道我是否在錯誤的地方得到了代碼，或者沒有，請幫助。

var map; 
    var infoWindow; 
    var service; 


    function initMap() { 

     map = new google.maps.Map(document.getElementById('map'), { 
      center: {lat: 51.545213, lng: -0.0307699}, 
      zoom: 15, 
      styles: [{ 
       stylers: [{visibility: 'simplified'}] 
      }, { 
       elementType: 'labels', 
       stylers: [{visibility: 'on'}] 
      }] 
     }); 

     var input = /** @type {!HTMLInputElement} */(
       document.getElementById('pac-input')); 

     var types = document.getElementById('type-selector'); 
     map.controls[google.maps.ControlPosition.TOP_LEFT].push(input); 
     map.controls[google.maps.ControlPosition.TOP_LEFT].push(types); 

     var autocomplete = new google.maps.places.Autocomplete(input); 
     autocomplete.bindTo('bounds', map); 

     var infowindow = new google.maps.InfoWindow(); 
     var marker = new google.maps.Marker({ 
      map: map, 
      anchorPoint: new google.maps.Point(0, -29) 
     }); 

    autocomplete.addListener('place_changed', function() { 
     infowindow.close(); 
     marker.setVisible(false); 
     var place = autocomplete.getPlace(); 
     if (!place.geometry) { 
     // User entered the name of a Place that was not suggested and 
     // pressed the Enter key, or the Place Details request failed. 
     window.alert("No details available for input: '" + place.name + "'"); 
     return; 
     } 

     // If the place has a geometry, then present it on a map. 
     if (place.geometry.viewport) { 
     map.fitBounds(place.geometry.viewport); 
     } else { 
     map.setCenter(place.geometry.location); 
     map.setZoom(17); // Why 17? Because it looks good. 
     } 
     marker.setIcon(/** @type {google.maps.Icon} */({ 
     url: place.icon, 
     size: new google.maps.Size(71, 71), 
     origin: new google.maps.Point(0, 0), 
     anchor: new google.maps.Point(17, 34), 
     scaledSize: new google.maps.Size(35, 35) 
     })); 
     marker.setPosition(place.geometry.location); 
     marker.setVisible(true); 

     var address = ''; 
     if (place.address_components) { 
     address = [ 
      (place.address_components[0] && place.address_components[0].short_name || ''), 
      (place.address_components[1] && place.address_components[1].short_name || ''), 
      (place.address_components[2] && place.address_components[2].short_name || '') 
     ].join(' '); 
     } 

     infowindow.setContent('<div><strong>' + place.name + '</strong><br>' + address); 
     infowindow.open(map, marker); 
    }); 
    // Sets a listener on a radio button to change the filter type on Places 
    // Autocomplete. 
    function setupClickListener(id, types) { 
     var radioButton = document.getElementById(id); 
     radioButton.addEventListener('click', function() { 
     autocomplete.setTypes(types); 
     }); 
    } 

    setupClickListener('changetype-all', []); 
    setupClickListener('changetype-address', ['address']); 
    setupClickListener('changetype-establishment', ['establishment']); 
    setupClickListener('changetype-geocode', ['geocode']); 

    infoWindow = new google.maps.InfoWindow(); 
    service = new google.maps.places.PlacesService(map); 

    // The idle event is a debounced event, so we can query & listen without 
    // throwing too many requests at the server. 
    map.addListener('idle', performSearch(places)); 
    } 



    function handleLocationError(browserHasGeolocation, infoWindow, pos) { 
    infoWindow.setPosition(pos); 
    infoWindow.setContent(browserHasGeolocation ? 
          'Error: The Geolocation service failed.' : 
          'Error: Your browser doesn\'t support geolocation.'); 
    } 

    function performSearch(places) { 

     var places = places; 
    var request = { 
     bounds: map.getBounds(), 
     keyword: places 
    }; 
    service.radarSearch(request, callback); 

    } 

    function callback(results, status) { 
    if (status !== google.maps.places.PlacesServiceStatus.OK) { 
     console.error(status); 
     return; 
    } 
    for (var i = 0, result; result = results[i]; i++) { 
     addMarker(result); 
    } 
    } 
    function addMarker(place) { 
    var marker = new google.maps.Marker({ 
     map: map, 
     position: place.geometry.location, 
    // icon: { 
     // url: 'https://developers.google.com/maps/documentation/javascript/images/circle.png', 
     //anchor: new google.maps.Point(10, 10), 
     //scaledSize: new google.maps.Size(10, 17) 
     //} 

    }); 


    google.maps.event.addListener(marker, 'click', function() { 
     service.getDetails(place, function(result, status) { 
     if (status !== google.maps.places.PlacesServiceStatus.OK) { 
      console.error(status); 
      return; 
     } 
     infoWindow.setContent(result.name); 
     infoWindow.open(map, marker); 
     }); 
    }); 
    } 
    function initAutocomplete() { 
var map = new google.maps.Map(document.getElementById('map'), { 
    center: { lat: -33.8688, lng: 151.2195 }, 
    zoom: 13, 
    mapTypeId: 'roadmap' 
}); 

// Create the search box and link it to the UI element. 
var searchInput = document.getElementById('pac-input'); 
var searchBtn = document.getElementById('search-button'); 
var searchBox = new google.maps.places.SearchBox(searchInput); 
map.controls[google.maps.ControlPosition.TOP_LEFT].push(searchInput); 
map.controls[google.maps.ControlPosition.TOP_LEFT].push(searchBtn); 

// Bias the SearchBox results towards current map's viewport. 
map.addListener('bounds_changed', function() { 
    searchBox.setBounds(map.getBounds()); 
}); 

var markers = []; 
// Listen for the event fired when the user selects a prediction and retrieve 
// more details for that place. 
searchBox.addListener('places_changed', function() { 
    //displaySearchResults(map, searchBox, markers); 
}); 


searchBtn.onclick = function() { 
    displaySearchResults(map,searchBox,markers); 
} 
} 






function displaySearchResults(map, searchBox, markers) { 
var places = searchBox.getPlaces(); 

if (places.length == 0) { 
    return; 
} 

// Clear out the old markers. 


// For each place, get the icon, name and location. 
var bounds = new google.maps.LatLngBounds(); 
places.forEach(function (place) { 
    if (!place.geometry) { 
     console.log("Returned place contains no geometry"); 
     return; 
    } 
    var icon = { 
     url: place.icon, 
     size: new google.maps.Size(71, 71), 
     origin: new google.maps.Point(0, 0), 
     anchor: new google.maps.Point(17, 34), 
     scaledSize: new google.maps.Size(25, 25) 
    }; 

    // Create a marker for each place. 
    markers.push(new google.maps.Marker({ 
     map: map, 
     icon: icon, 
     title: place.name, 
     position: place.geometry.location 

    })); 
    function clearMarkers() { 
     for (var i = 0; i < markers.length; i++) { 
      markers[i].setMap(map); 
     } 
    } 
    if (place.geometry.viewport) { 
     // Only geocodes have viewport. 
     bounds.union(place.geometry.viewport); 
    } else { 
     bounds.extend(place.geometry.location); 
    } 
}); 
map.fitBounds(bounds); 
} 

Answer 1

沒有大的測試：

在您的 「功能clearMarkers（）」 你必須使用：

標記[I] .setMap（NULL）;

而不是標記[i] .setMap（map）;這將設置標誌再次

Answer 2

附加：

聲明：本

var marker; 
var markers[]; 

在你的代碼的全球頂級。函數內部只使用「marker」，而不是「var marker」。如果稍後要刪除的標記已經通過「marker = new google.maps.Marker（{...」）被定義，則將其隨後推入具有markers.push（標記）的標記數組中。

同樣在「//創建每個地方的標誌。」我會用標準的方式定義和存儲：

marker = new google.maps.Marker({ 
     ...}); 
markers.push(marker).