2013-05-10 52 views
25

Tôi đã thử xem nhiều khối mã khác nhau tại đây và trên tài liệu API Google Maps nhưng STILL đã không thể tìm ra cách ẩn dấu.API bản đồ của Google - Xóa đánh dấu

Đây là mã hiện tại mà tôi đang sử dụng và mã này hoạt động cho một phiên bản. Khi tôi nói thêm "cho" vòng lặp trong hàm với markers.setMap (null) Firefox sẽ hiển thị các lỗi sau:

Lỗi: Lỗi Loại: markers.setMap không phải là một chức năng

function removeMarkers(){ 
    var markers; 
    alert(markers); 
    alert(locations.length); 
    for (i = 0; i<locations.length; i++){ 
     markers = locations[i]; 
     alert(markers.title); 
     markers.setMap(null); 
    } 
} 

Các thông tin khác : Campus Mapfull code (trừ Map API)

+0

gì mã của bạn tạo ra các dấu hiệu như thế nào? Bạn có thể cung cấp một jsfiddle thể hiện vấn đề (hoặc giống như bản đồ có vấn đề) không? – geocodezip

+1

bản sao có thể có của [API Google Maps v3: Cách xóa tất cả các điểm đánh dấu?] (Http://stackoverflow.com/questions/1544739/google-maps-api-v3-how-to-remove-all-markers) – geocodezip

+0

vui lòng chỉnh sửa câu hỏi của bạn với thông tin bổ sung. – geocodezip

Trả lời

66

Bạn cần giữ một mảng các đối tượng google.maps.Marker để ẩn (hoặc xóa hoặc chạy các thao tác khác trên chúng).

Trong phạm vi toàn cầu:

var gmarkers = []; 

Sau đó đẩy điểm đánh dấu trên mảng rằng khi bạn tạo ra chúng:

var marker = new google.maps.Marker({ 
    position: new google.maps.LatLng(locations[i].latitude, locations[i].longitude), 
    title: locations[i].title, 
    icon: icon, 
    map:map 
}); 

// Push your newly created marker into the array: 
gmarkers.push(marker); 

Sau đó, để loại bỏ chúng:

function removeMarkers(){ 
    for(i=0; i<gmarkers.length; i++){ 
     gmarkers[i].setMap(null); 
    } 
} 

working example (Toggles các điểm đánh dấu)

đoạn mã

mã:

var gmarkers = []; 
 
var RoseHulman = new google.maps.LatLng(39.483558, -87.324593); 
 
var styles = [{ 
 
    stylers: [{ 
 
    hue: "black" 
 
    }, { 
 
    saturation: -90 
 
    }] 
 
}, { 
 
    featureType: "road", 
 
    elementType: "geometry", 
 
    stylers: [{ 
 
    lightness: 100 
 
    }, { 
 
    visibility: "simplified" 
 
    }] 
 
}, { 
 
    featureType: "road", 
 
    elementType: "labels", 
 
    stylers: [{ 
 
    visibility: "on" 
 
    }] 
 
}]; 
 

 
var styledMap = new google.maps.StyledMapType(styles, { 
 
    name: "Campus" 
 
}); 
 
var mapOptions = { 
 
    center: RoseHulman, 
 
    zoom: 15, 
 
    mapTypeControl: true, 
 
    zoomControl: true, 
 
    zoomControlOptions: { 
 
    style: google.maps.ZoomControlStyle.SMALL 
 
    }, 
 
    mapTypeControlOptions: { 
 
    mapTypeIds: ['map_style', google.maps.MapTypeId.HYBRID], 
 
    style: google.maps.MapTypeControlStyle.DROPDOWN_MENU 
 
    }, 
 
    scrollwheel: false, 
 
    streetViewControl: true, 
 

 
}; 
 

 
var map = new google.maps.Map(document.getElementById('map'), mapOptions); 
 
map.mapTypes.set('map_style', styledMap); 
 
map.setMapTypeId('map_style'); 
 

 
var infowindow = new google.maps.InfoWindow({ 
 
    maxWidth: 300, 
 
    infoBoxClearance: new google.maps.Size(1, 1), 
 
    disableAutoPan: false 
 
}); 
 

 
var marker, i, icon, image; 
 

 
var locations = [{ 
 
    "id": "1", 
 
    "category": "6", 
 
    "campus_location": "F2", 
 
    "title": "Alpha Tau Omega Fraternity", 
 
    "description": "<p>Alpha Tau Omega house</p>", 
 
    "longitude": "-87.321133", 
 
    "latitude": "39.484092" 
 
}, { 
 
    "id": "2", 
 
    "category": "6", 
 
    "campus_location": "B2", 
 
    "title": "Apartment Commons", 
 
    "description": "<p>The commons area of the apartment-style residential complex</p>", 
 
    "longitude": "-87.329282", 
 
    "latitude": "39.483599" 
 
}, { 
 
    "id": "3", 
 
    "category": "6", 
 
    "campus_location": "B2", 
 
    "title": "Apartment East", 
 
    "description": "<p>Apartment East</p>", 
 
    "longitude": "-87.328809", 
 
    "latitude": "39.483748" 
 
}, { 
 
    "id": "4", 
 
    "category": "6", 
 
    "campus_location": "B2", 
 
    "title": "Apartment West", 
 
    "description": "<p>Apartment West</p>", 
 
    "longitude": "-87.329732", 
 
    "latitude": "39.483429" 
 
}, { 
 
    "id": "5", 
 
    "category": "6", 
 
    "campus_location": "C2", 
 
    "title": "Baur-Sames-Bogart (BSB) Hall", 
 
    "description": "<p>Baur-Sames-Bogart Hall</p>", 
 
    "longitude": "-87.325714", 
 
    "latitude": "39.482382" 
 
}, { 
 
    "id": "6", 
 
    "category": "6", 
 
    "campus_location": "D3", 
 
    "title": "Blumberg Hall", 
 
    "description": "<p>Blumberg Hall</p>", 
 
    "longitude": "-87.328321", 
 
    "latitude": "39.483388" 
 
}, { 
 
    "id": "7", 
 
    "category": "1", 
 
    "campus_location": "E1", 
 
    "title": "The Branam Innovation Center", 
 
    "description": "<p>The Branam Innovation Center</p>", 
 
    "longitude": "-87.322614", 
 
    "latitude": "39.48494" 
 
}, { 
 
    "id": "8", 
 
    "category": "6", 
 
    "campus_location": "G3", 
 
    "title": "Chi Omega Sorority", 
 
    "description": "<p>Chi Omega house</p>", 
 
    "longitude": "-87.319905", 
 
    "latitude": "39.482071" 
 
}, { 
 
    "id": "9", 
 
    "category": "3", 
 
    "campus_location": "D1", 
 
    "title": "Cook Stadium/Phil Brown Field", 
 
    "description": "<p>Cook Stadium at Phil Brown Field</p>", 
 
    "longitude": "-87.325258", 
 
    "latitude": "39.485007" 
 
}, { 
 
    "id": "10", 
 
    "category": "1", 
 
    "campus_location": "D2", 
 
    "title": "Crapo Hall", 
 
    "description": "<p>Crapo Hall</p>", 
 
    "longitude": "-87.324368", 
 
    "latitude": "39.483709" 
 
}, { 
 
    "id": "11", 
 
    "category": "6", 
 
    "campus_location": "G3", 
 
    "title": "Delta Delta Delta Sorority", 
 
    "description": "<p>Delta Delta Delta</p>", 
 
    "longitude": "-87.317477", 
 
    "latitude": "39.482951" 
 
}, { 
 
    "id": "12", 
 
    "category": "6", 
 
    "campus_location": "D2", 
 
    "title": "Deming Hall", 
 
    "description": "<p>Deming Hall</p>", 
 
    "longitude": "-87.325822", 
 
    "latitude": "39.483421" 
 
}, { 
 
    "id": "13", 
 
    "category": "5", 
 
    "campus_location": "F1", 
 
    "title": "Facilities Operations", 
 
    "description": "<p>Facilities Operations</p>", 
 
    "longitude": "-87.321782", 
 
    "latitude": "39.484916" 
 
}, { 
 
    "id": "14", 
 
    "category": "2", 
 
    "campus_location": "E3", 
 
    "title": "Flame of the Millennium", 
 
    "description": "<p>Flame of Millennium sculpture</p>", 
 
    "longitude": "-87.323306", 
 
    "latitude": "39.481978" 
 
}, { 
 
    "id": "15", 
 
    "category": "5", 
 
    "campus_location": "E2", 
 
    "title": "Hadley Hall", 
 
    "description": "<p>Hadley Hall</p>", 
 
    "longitude": "-87.324046", 
 
    "latitude": "39.482887" 
 
}, { 
 
    "id": "16", 
 
    "category": "2", 
 
    "campus_location": "F2", 
 
    "title": "Hatfield Hall", 
 
    "description": "<p>Hatfield Hall</p>", 
 
    "longitude": "-87.322340", 
 
    "latitude": "39.482146" 
 
}, { 
 
    "id": "17", 
 
    "category": "6", 
 
    "campus_location": "C2", 
 
    "title": "Hulman Memorial Union", 
 
    "description": "<p>Hulman Memorial Union</p>", 
 
    "longitude": "-87.32698", 
 
    "latitude": "39.483574" 
 
}, { 
 
    "id": "18", 
 
    "category": "1", 
 
    "campus_location": "E2", 
 
    "title": "John T. Myers Center for Technological Research with Industry", 
 
    "description": "<p>John T. Myers Center for Technological Research With Industry</p>", 
 
    "longitude": "-87.322984", 
 
    "latitude": "39.484063" 
 
}, { 
 
    "id": "19", 
 
    "category": "6", 
 
    "campus_location": "A2", 
 
    "title": "Lakeside Hall", 
 
    "description": "<p></p>", 
 
    "longitude": "-87.330612", 
 
    "latitude": "39.482804" 
 
}, { 
 
    "id": "20", 
 
    "category": "6", 
 
    "campus_location": "F2", 
 
    "title": "Lambda Chi Alpha Fraternity", 
 
    "description": "<p>Lambda Chi Alpha</p>", 
 
    "longitude": "-87.320999", 
 
    "latitude": "39.48305" 
 
}, { 
 
    "id": "21", 
 
    "category": "1", 
 
    "campus_location": "D2", 
 
    "title": "Logan Library", 
 
    "description": "<p>Logan Library</p>", 
 
    "longitude": "-87.324851", 
 
    "latitude": "39.483408" 
 
}, { 
 
    "id": "22", 
 
    "category": "6", 
 
    "campus_location": "C2", 
 
    "title": "Mees Hall", 
 
    "description": "<p>Mees Hall</p>", 
 
    "longitude": "-87.32778", 
 
    "latitude": "39.483533" 
 
}, { 
 
    "id": "23", 
 
    "category": "1", 
 
    "campus_location": "E2", 
 
    "title": "Moench Hall", 
 
    "description": "<p>Moench Hall</p>", 
 
    "longitude": "-87.323695", 
 
    "latitude": "39.483471" 
 
}, { 
 
    "id": "24", 
 
    "category": "1", 
 
    "campus_location": "G4", 
 
    "title": "Oakley Observatory", 
 
    "description": "<p>Oakley Observatory</p>", 
 
    "longitude": "-87.31616", 
 
    "latitude": "39.483789" 
 
}, { 
 
    "id": "25", 
 
    "category": "1", 
 
    "campus_location": "D2", 
 
    "title": "Olin Hall and Olin Advanced Learning Center", 
 
    "description": "<p>Olin Hall</p>", 
 
    "longitude": "-87.324550", 
 
    "latitude": "39.482796" 
 
}, { 
 
    "id": "26", 
 
    "category": "6", 
 
    "campus_location": "C3", 
 
    "title": "Percopo Hall", 
 
    "description": "<p>Percopo Hall</p>", 
 
    "longitude": "-87.328182", 
 
    "latitude": "39.482121" 
 
}, { 
 
    "id": "27", 
 
    "category": "6", 
 
    "campus_location": "G3", 
 
    "title": "Public Safety Office", 
 
    "description": "<p>The Office of Public Safety</p>", 
 
    "longitude": "-87.320377", 
 
    "latitude": "39.48191" 
 
}, { 
 
    "id": "28", 
 
    "category": "1", 
 
    "campus_location": "E2", 
 
    "title": "Rotz Mechanical Engineering Lab", 
 
    "description": "<p>Rotz Lab</p>", 
 
    "longitude": "-87.323247", 
 
    "latitude": "39.483711" 
 
}, { 
 
    "id": "28", 
 
    "category": "6", 
 
    "campus_location": "C2", 
 
    "title": "Scharpenberg Hall", 
 
    "description": "<p>Scharpenberg Hall</p>", 
 
    "longitude": "-87.328139", 
 
    "latitude": "39.483582" 
 
}, { 
 
    "id": "29", 
 
    "category": "6", 
 
    "campus_location": "G2", 
 
    "title": "Sigma Nu Fraternity", 
 
    "description": "<p>The Sigma Nu house</p>", 
 
    "longitude": "-87.31999", 
 
    "latitude": "39.48374" 
 
}, { 
 
    "id": "30", 
 
    "category": "6", 
 
    "campus_location": "E4", 
 
    "title": "South Campus/Rose-Hulman Ventures", 
 
    "description": "<p></p>", 
 
    "longitude": "-87.330623", 
 
    "latitude": "39.417646" 
 
}, { 
 
    "id": "31", 
 
    "category": "6", 
 
    "campus_location": "C3", 
 
    "title": "Speed Hall", 
 
    "description": "<p>Speed Hall</p>", 
 
    "longitude": "-87.326632", 
 
    "latitude": "39.482121" 
 
}, { 
 
    "id": "32", 
 
    "category": "3", 
 
    "campus_location": "C1", 
 
    "title": "Sports and Recreation Center", 
 
    "description": "<p></p>", 
 
    "longitude": "-87.3272", 
 
    "latitude": "39.484874" 
 
}, { 
 
    "id": "33", 
 
    "category": "6", 
 
    "campus_location": "F2", 
 
    "title": "Triangle Fraternity", 
 
    "description": "<p>Triangle fraternity</p>", 
 
    "longitude": "-87.32113", 
 
    "latitude": "39.483659" 
 
}, { 
 
    "id": "34", 
 
    "category": "6", 
 
    "campus_location": "B3", 
 
    "title": "White Chapel", 
 
    "description": "<p>The White Chapel</p>", 
 
    "longitude": "-87.329367", 
 
    "latitude": "39.482481" 
 
}, { 
 
    "id": "35", 
 
    "category": "6", 
 
    "campus_location": "F2", 
 
    "title": "Women's Fraternity Housing", 
 
    "description": "", 
 
    "image": "", 
 
    "longitude": "-87.320753", 
 
    "latitude": "39.482401" 
 
}, { 
 
    "id": "36", 
 
    "category": "3", 
 
    "campus_location": "E1", 
 
    "title": "Intramural Fields", 
 
    "description": "<p></p>", 
 
    "longitude": "-87.321267", 
 
    "latitude": "39.485934" 
 
}, { 
 
    "id": "37", 
 
    "category": "3", 
 
    "campus_location": "A3", 
 
    "title": "James Rendel Soccer Field", 
 
    "description": "<p></p>", 
 
    "longitude": "-87.332135", 
 
    "latitude": "39.480933" 
 
}, { 
 
    "id": "38", 
 
    "category": "3", 
 
    "campus_location": "B2", 
 
    "title": "Art Nehf Field", 
 
    "description": "<p>Art Nehf Field</p>", 
 
    "longitude": "-87.330923", 
 
    "latitude": "39.48022" 
 
}, { 
 
    "id": "39", 
 
    "category": "3", 
 
    "campus_location": "B2", 
 
    "title": "Women's Softball Field", 
 
    "description": "<p></p>", 
 
    "longitude": "-87.329904", 
 
    "latitude": "39.480278" 
 
}, { 
 
    "id": "40", 
 
    "category": "3", 
 
    "campus_location": "D1", 
 
    "title": "Joy Hulbert Tennis Courts", 
 
    "description": "<p>The Joy Hulbert Outdoor Tennis Courts</p>", 
 
    "longitude": "-87.323767", 
 
    "latitude": "39.485595" 
 
}, { 
 
    "id": "41", 
 
    "category": "6", 
 
    "campus_location": "B2", 
 
    "title": "Speed Lake", 
 
    "description": "", 
 
    "image": "", 
 
    "longitude": "-87.328134", 
 
    "latitude": "39.482779" 
 
}, { 
 
    "id": "42", 
 
    "category": "5", 
 
    "campus_location": "F1", 
 
    "title": "Recycling Center", 
 
    "description": "", 
 
    "image": "", 
 
    "longitude": "-87.320098", 
 
    "latitude": "39.484593" 
 
}, { 
 
    "id": "43", 
 
    "category": "1", 
 
    "campus_location": "F3", 
 
    "title": "Army ROTC", 
 
    "description": "", 
 
    "image": "", 
 
    "longitude": "-87.321342", 
 
    "latitude": "39.481992" 
 
}, { 
 
    "id": "44", 
 
    "category": "2", 
 
    "campus_location": " ", 
 
    "title": "Self Made Man", 
 
    "description": "", 
 
    "image": "", 
 
    "longitude": "-87.326272", 
 
    "latitude": "39.484481" 
 
}, { 
 
    "id": "P1", 
 
    "category": "4", 
 
    "title": "Percopo Parking", 
 
    "description": "", 
 
    "image": "", 
 
    "longitude": "-87.328756", 
 
    "latitude": "39.481587" 
 
}, { 
 
    "id": "P2", 
 
    "category": "4", 
 
    "title": "Speed Parking", 
 
    "description": "", 
 
    "image": "", 
 
    "longitude": "-87.327361", 
 
    "latitude": "39.481694" 
 
}, { 
 
    "id": "P3", 
 
    "category": "4", 
 
    "title": "Main Parking", 
 
    "description": "", 
 
    "image": "", 
 
    "longitude": "-87.326245", 
 
    "latitude": "39.481446" 
 
}, { 
 
    "id": "P4", 
 
    "category": "4", 
 
    "title": "Lakeside Parking", 
 
    "description": "", 
 
    "image": "", 
 
    "longitude": "-87.330848", 
 
    "latitude": "39.483284" 
 
}, { 
 
    "id": "P5", 
 
    "category": "4", 
 
    "title": "Hatfield Hall Parking", 
 
    "description": "", 
 
    "image": "", 
 
    "longitude": "-87.321417", 
 
    "latitude": "39.482398" 
 
}, { 
 
    "id": "P6", 
 
    "category": "4", 
 
    "title": "Women's Fraternity Parking", 
 
    "description": "", 
 
    "image": "", 
 
    "longitude": "-87.320977", 
 
    "latitude": "39.482315" 
 
}, { 
 
    "id": "P7", 
 
    "category": "4", 
 
    "title": "Myers and Facilities Parking", 
 
    "description": "", 
 
    "image": "", 
 
    "longitude": "-87.322243", 
 
    "latitude": "39.48417" 
 
}, { 
 
    "id": "P8", 
 
    "category": "4", 
 
    "title": "", 
 
    "description": "", 
 
    "image": "", 
 
    "longitude": "-87.323241", 
 
    "latitude": "39.484758" 
 
}, { 
 
    "id": "P9", 
 
    "category": "4", 
 
    "title": "", 
 
    "description": "", 
 
    "image": "", 
 
    "longitude": "-87.323617", 
 
    "latitude": "39.484311" 
 
}, { 
 
    "id": "P10", 
 
    "category": "4", 
 
    "title": "", 
 
    "description": "", 
 
    "image": "", 
 
    "longitude": "-87.325714", 
 
    "latitude": "39.484584" 
 
}, { 
 
    "id": "P11", 
 
    "category": "4", 
 
    "title": "", 
 
    "description": "", 
 
    "image": "", 
 
    "longitude": "-87.32778", 
 
    "latitude": "39.484145" 
 
}, { 
 
    "id": "P12", 
 
    "category": "4", 
 
    "title": "", 
 
    "description": "", 
 
    "image": "", 
 
    "longitude": "-87.329035", 
 
    "latitude": "39.4848" 
 
}]; 
 

 
for (i = 0; i < locations.length; i++) { 
 

 
    var marker = new google.maps.Marker({ 
 
    position: new google.maps.LatLng(locations[i].latitude, locations[i].longitude), 
 
    title: locations[i].title, 
 
    map: map 
 
    }); 
 
    gmarkers.push(marker); 
 
    google.maps.event.addListener(marker, 'click', (function(marker, i) { 
 
    return function() { 
 
     if (locations[i].description !== "" || locations[i].title !== "") { 
 
     infowindow.setContent('<div class="content" id="content-' + locations[i].id + 
 
      '" style="max-height:300px; font-size:12px;"><h3>' + locations[i].title + '</h3>' + 
 
      '<hr class="grey" />' + 
 
      hasImage(locations[i]) + 
 
      locations[i].description) + '</div>'; 
 
     infowindow.open(map, marker); 
 
     } 
 
    } 
 
    })(marker, i)); 
 
} 
 

 
function toggleMarkers() { 
 
    for (i = 0; i < gmarkers.length; i++) { 
 
    if (gmarkers[i].getMap() != null) gmarkers[i].setMap(null); 
 
    else gmarkers[i].setMap(map); 
 
    } 
 
} 
 

 
function hasImage(location) { 
 
    return ''; 
 
}
html, 
 
body, 
 
#map { 
 
    height: 100%; 
 
    width: 100%; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://maps.googleapis.com/maps/api/js"></script> 
 
<div id="controls"> 
 
    <input type="button" value="Toggle All Markers" onClick="toggleMarkers()" /> 
 
</div> 
 
<div id="map"></div>

+0

Tôi đã suy nghĩ, có một tùy chọn thứ hai, bạn có thể thêm các điểm đánh dấu vào mảng vị trí, thay vì tạo một mảng riêng biệt. – geocodezip

+0

Tôi đã làm 'i

+0

@geocodezip cảm ơn rất nhiều người. Đã gãi đầu của tôi về điều này trong 5 giờ qua! – user875139

0

Bạn có thể thử này

markers[markers.length-1].setMap(null); 

Hy vọng nó hoạt động.

0

Theo tài liệu Google họ nói rằng đây là cách tốt nhất để làm điều đó. Đầu tiên tạo ra chức năng này để tìm hiểu có bao nhiêu cột mốc có/

function setMapOnAll(map1) { 
    for (var i = 0; i < markers.length; i++) { 
     markers[i].setMap(map1); 
    } 
    } 

Tiếp theo, tạo chức năng khác để lấy đi tất cả các điểm đánh dấu

function clearMarker(){ 
setMapOnAll(null); 
} 

Sau đó tạo chức năng cuối cùng này để xóa tất cả các dấu hiệu khi bao giờ chức năng này được gọi.

function delateMarkers(){ 
clearMarker() 
markers = [] 
//console.log(markers) This is just if you want to 

}

Hy vọng rằng sẽ giúp may mắn

Các vấn đề liên quan