更改Google地圖標記檢查

Question

我對使用Google地圖api相當陌生，所以我可能會以完全錯誤的方式解決這個問題。但是我一直沒能找到一種簡單的方式來重新加載基於我的搜索checkbox值的標記。基本上我想改變request中的types的值，以改變哪些類型的地方有標記。以下是我迄今爲止：

var checked = []; 
function success(position) { 

    var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); 
    var myOptions = { 
    zoom: 15, 
    center: latlng, 
    mapTypeControl: false, 
    navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL}, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    map = new google.maps.Map(document.getElementById("map-canvas"), myOptions); 


    loadMarkers(latlng, position); 
} 
navigator.geolocation.getCurrentPosition(success, error); 

然後我打電話：

function loadMarkers (latlng, position) { 
    window.position = position; 
    window.latlng = latlng; 
    var marker = new google.maps.Marker({ 
     position: latlng, 
     map: map 
    }); 
    console.log("request="+checked); 
    var request = { 
    location: latlng, 
    radius: 500, 
    types: checked 
    }; 
    window.request = request; 
} 

此工程在頁面加載很好，但我想改變複選框點擊標記，所以我有這樣的：

$('input[type=checkbox]:checked').each(function(){ 
    checked.push($(this).val()); 
    }); 

$('input[type=checkbox]').click(function(){ 
    checked= []; 
$('input[type=checkbox]:checked').each(function(){ 
    checked.push($(this).val()); 
    }); 
findRequest(window.latlng, window.position); 
}); 

不幸的是，這不會重新加載標記，因爲我無法弄清getPlaces（）的正確方法並基於它重新加載標記。我知道我可能會以這種錯誤的方式進行，但我一直無法找到關於如何做到這一點的清晰簡明的解釋。

Answer 1

因此，在搜索網頁後發現沒有什麼用處很容易實現，我更深入地瀏覽了api，並且我想出了一個漂亮的simple solution。這將允許您基於複選框篩選標記。它還允許您搜索新位置並在當前位置附近找到該區域中的標記以及過濾標記/位置：

var map; 
var infoWindow; 
var service; 
var checked = []; 
    var markers = []; 
var markersArray = []; 
var input = /** @type {HTMLInputElement} */(
     document.getElementById('pac-input')); 
var searchBox = new google.maps.places.SearchBox(
    /** @type {HTMLInputElement} */(input)); 
$('input[type=checkbox]:checked').each(function(){ 
    checked.push($(this).val()); 
    }); 
console.log(checked); 

//checks if checkboxes are checked and adds them to array 
$('input[type=checkbox]').click(function(){ 
    checked= []; 
$('input[type=checkbox]:checked').each(function(){ 
    checked.push($(this).val()); 
    }); 
//findRequest(window.latlng, window.position); 
clearOverlays(); 
    performSearch(checked); 
}); 
function initialize(position) { 
    var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); 
    map = new google.maps.Map(document.getElementById('map-canvas'), { 
    center: latlng, 
    zoom: 15, 
    styles: [ 
     { 
     stylers: [ 
      { visibility: 'simplified' } 
     ] 
     }, 
     { 
     elementType: 'labels', 
     stylers: [ 
      { visibility: 'off' } 
     ] 
     } 
    ] 
    }); 

    infoWindow = new google.maps.InfoWindow(); 
    service = new google.maps.places.PlacesService(map); 
    map.controls[google.maps.ControlPosition.TOP_LEFT].push(input); 
    google.maps.event.addListenerOnce(map, 'bounds_changed', performSearch); 
    google.maps.event.addListener(searchBox, 'places_changed', searchLocation); 
} 
//searches based on current location and adds markers 
function performSearch() { 
    var request = { 
    bounds: map.getBounds(), 
    radius:500, 
    types: checked 
    }; 
    console.log(checked); 
    service.radarSearch(request, callback); 
} 
//searches based on searchbox location and adds markers 
function searchLocation() { 
    console.log('searching new location'); 
    var places = searchBox.getPlaces(); 

    for (var i = 0, marker; marker = markers[i]; i++) { 
     marker.setMap(null); 
    } 

    // For each place, get the icon, place name, and location. 
    var bounds = new google.maps.LatLngBounds(); 

    for (var i = 0, place; place = places[i]; i++) { 
     var image = { 
     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) 
     }; 
     var marker = new google.maps.Marker({ 
     map: map, 
     icon: image, 
     title: place.name, 
     position: place.geometry.location 
     }); 
    var request = { 
    location: place.geometry.location, 
    radius: 500, 
    types: checked 
    }; 

    var service = new google.maps.places.PlacesService(map); 
    service.nearbySearch(request, callback); 
     bounds.extend(place.geometry.location); 
     markers.push(marker); 
    } 
    map.fitBounds(bounds); 
    map.setZoom(15); 
    }; 
function callback(results, status) { 
    if (status != google.maps.places.PlacesServiceStatus.OK) { 
    alert(status); 
    return; 
    } 
    for (var i = 0, result; result = results[i]; i++) { 
    createMarker(result); 
    } 
} 
function clearOverlays() { 
    for (var i = 0; i < markersArray.length; i++) { 
    markersArray[i].setMap(null); 
    } 
    markersArray.length = 0; 
    console.log("cleared"+markersArray); 
} 
function createMarker(place) { 
    var marker = new google.maps.Marker({ 
    map: map, 
    position: place.geometry.location, 
    icon: { 
     // Star 
     path: 'M 0,-24 6,-7 24,-7 10,4 15,21 0,11 -15,21 -10,4 -24,-7 -6,-7 z', 
     fillColor: '#ffff00', 
     fillOpacity: 1, 
     scale: 1/4, 
     strokeColor: '#bd8d2c', 
     strokeWeight: 1 
    } 
    }); 
markersArray.push(marker); 
var request = { reference: place.reference }; 
    google.maps.event.addListener(marker, 'click', function() { 
    service.getDetails(request, function(details, status) { 
     if (status != google.maps.places.PlacesServiceStatus.OK) { 
     alert(status); 
     return; 
     } 
     infoWindow.setContent(details.name + "<br />" + details.formatted_address +"<br />" + '<div id="bodyContent">' + "<br />" + '<p>Custom View Can Go Here' + details.formatted_phone_number); 
     infoWindow.open(map, marker); 
    }); 
    }); 
    google.maps.event.addListener(map, 'bounds_changed', function() { 
    var bounds = map.getBounds(); 
    searchBox.setBounds(bounds); 
    }); 
} 

//google.maps.event.addDomListener(window, 'load', initialize); 
navigator.geolocation.getCurrentPosition(initialize);