Giải pháp khá dễ dàng. Bạn có thể sử dụng phương pháp : marker.setMap(map);. Ở đây, bạn xác định trên bản đồ mà pin sẽ xuất hiện.
Vì vậy, nếu bạn đặt nulltrong phương thức này ( marker.setMap(null);), pin sẽ biến mất.
Bây giờ, bạn có thể viết một phù thủy chức năng trong khi làm biến mất tất cả các điểm đánh dấu trong bản đồ của bạn.
Bạn chỉ cần thêm để đặt các chân của bạn vào một mảng và khai báo chúng bằng markers.push (your_new pin)hoặc mã này chẳng hạn:
// Adds a marker to the map and push to the array.
function addMarker(location) {
var marker = new google.maps.Marker({
position: location,
map: map
});
markers.push(marker);
}
Đây là một phù thủy chức năng có thể thiết lập hoặc biến mất tất cả các điểm đánh dấu của mảng của bạn trong bản đồ:
// Sets the map on all markers in the array.
function setMapOnAll(map) {
for (var i = 0; i < markers.length; i++) {
markers[i].setMap(map);
}
}
Để biến mất tất cả các điểm đánh dấu của bạn, bạn nên gọi hàm với null:
// Removes the markers from the map, but keeps them in the array.
function clearMarkers() {
setMapOnAll(null);
}
Và, để xóa và biến mất, tất cả các điểm đánh dấu của bạn, bạn nên đặt lại mảng các điểm đánh dấu như thế này:
// Deletes all markers in the array by removing references to them.
function deleteMarkers() {
clearMarkers();
markers = [];
}
Đây là mã hoàn chỉnh của tôi. Đó là cách đơn giản nhất tôi có thể giảm xuống.
Hãy cẩn thận, bạn có thể thay thế YOUR_API_KEYmã bằng API chính của Google:
<!DOCTYPE html>
<html>
<head>
<title>Remove Markers</title>
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<p>Click on the map to add markers.</p>
<script>
// In the following example, markers appear when the user clicks on the map.
// The markers are stored in an array.
// The user can then click an option to hide, show or delete the markers.
var map;
var markers = [];
function initMap() {
var haightAshbury = {lat: 37.769, lng: -122.446};
map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: haightAshbury,
mapTypeId: 'terrain'
});
// This event listener will call addMarker() when the map is clicked.
map.addListener('click', function(event) {
addMarker(event.latLng);
});
// Adds a marker at the center of the map.
addMarker(haightAshbury);
}
// Adds a marker to the map and push to the array.
function addMarker(location) {
var marker = new google.maps.Marker({
position: location,
map: map
});
markers.push(marker);
}
// Sets the map on all markers in the array.
function setMapOnAll(map) {
for (var i = 0; i < markers.length; i++) {
markers[i].setMap(map);
}
}
// Removes the markers from the map, but keeps them in the array.
function clearMarkers() {
setMapOnAll(null);
}
// Shows any markers currently in the array.
function showMarkers() {
setMapOnAll(map);
}
// Deletes all markers in the array by removing references to them.
function deleteMarkers() {
clearMarkers();
markers = [];
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js key=YOUR_API_KEY&callback=initMap">
</script>
</body>
</html>
Bạn có thể tham khảo nhà phát triển google hoặc tài liệu đầy đủ về trang web của nhà phát triển google .