更改支票上的Google Maps Marker

Question

我对使用Google Maps api还是很陌生，所以我可能会完全以错误的方式进行操作。 但是我一直无法找到一种简单的方法来根据搜索中的复选框值重新加载标记。 基本上，我想更改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，并提出了一个非常简单的解决方案 。 这将允许您基于复选框过滤标记。 它还允许您搜索新位置并找到该区域中的标记，以及过滤当前位置周围的标记/位置：

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);