Question

我正在使用Google Maps Places Library处理与以下类似的内容：http://codepen.io/maudulus/pen/oxNXod。如您所见，当您加载页面时，有许多标记可以使用状态select进行过滤。您还可以使用搜索框在搜索位置的一个标准偏差内查找标记。

但是，我正在尝试将这两个功能组合在一起（例如，有人搜索某个位置，然后按状态过滤结果）。我不确定为什么这个目前不起作用...我的猜测是它可能是双加点，因为它似乎想要过滤位置（当你改变{{1时，你可以看到它们闪烁}}）。

位置代码

select

附录代码：

var map;
var originalStores = [];
var markersArr = [];
var geocoder = new google.maps.Geocoder();

var typingTimer; //timer identifier
var doneTypingInterval = 1000; //time in ms, 5 second for example
var $location = $('#location');

$location.on('keyup', function(e) {
  clearTimeout(typingTimer);
  typingTimer = setTimeout(queryLocation, doneTypingInterval);
});

$location.on('keydown', function() {
  clearTimeout(typingTimer);
});

function queryLocation(urlParamLocation) {
  var queryingLocation = (urlParamLocation) ? urlParamLocation : $('#location').val();
  getLatLong(queryingLocation, function(discoveredLatLng) {
    replotMap(discoveredLatLng);
  });
}

function getLatLong(address, cb) {
  var tempCurrentPosition = {
    latitude: "",
    longitude: ""
  };
  geocoder.geocode({
    'address': address
  }, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      tempCurrentPosition.latitude = results[0].geometry.location.lat();
      tempCurrentPosition.longitude = results[0].geometry.location.lng();
      cb(tempCurrentPosition);
    }
  });
}

function replotMap(locationValue) {
  if (locationValue) {
    $.each(originalStores, function(index, thisLocale) {
      thisLocale.distance = getDistanceFromLatLon(locationValue.latitude, locationValue.longitude, thisLocale.latitude, thisLocale.longitude);
    });
    var sdCompliant = withinOneSD(originalStores, standardDeviation(originalStores));
    addMapMarkers(sdCompliant);
  }
}

function initialize() {
  var input = document.getElementById('location');
  var autocomplete = new google.maps.places.Autocomplete(input);
}

initialize();

function initializeMap() {
  var myLatlng = new google.maps.LatLng(39.768408, -86.157975);
  var mapOptions = {
    zoom: 7,
    center: myLatlng,
    scrollwheel: false,
    navigationControl: false,
    mapTypeControl: false,
    scaleControl: false,
    draggable: true,
  };
  map = new google.maps.Map(document.getElementById('map-canvas'),
    mapOptions);
  plotAllMarkers();
}

initializeMap();

function plotAllMarkers() {
  removeExtraneousMarkers();
  $.each($('#locations-ul li'), function(index, store) {
    var thisStoreObj = {};
    thisStoreObj.Address = $(store).attr('address');
    thisStoreObj.latitude = $(store).attr('data-latitude');
    thisStoreObj.longitude = $(store).attr('data-longitude');
    thisStoreObj.Store = $(store).attr('data-store');
    thisStoreObj.distance = "";
    originalStores.push(thisStoreObj);
  });
  originalStores = originalStores.sort(compare);
  $.each(originalStores, function(index, thisStore) {
    if (thisStore.Store) {
      plotTableRow(thisStore);
    }
  });
  addMapMarkers(originalStores);
}

function addMapMarkers(arr, allArr) {
  removeExtraneousMarkers();
  deleteMarkers();
  var bounds = new google.maps.LatLngBounds();
  $.each(arr, function(index, thisLocation) {
    plotTableRow(thisLocation);
    var currentState = findState(thisLocation.Address);

    var currLatlng = new google.maps.LatLng(thisLocation.latitude, thisLocation.longitude);
    var marker = new google.maps.Marker({
      position: currLatlng,
      map: map,
      title: thisLocation.Store,
      state: currentState
    });

    markersArr.push(marker);
  });
  for (var i = 0; i < markersArr.length; i++) {
    bounds.extend(markersArr[i].getPosition());
  }
  map.fitBounds(bounds);

  adjustPlottedMarkersToBounds(markersArr);
}

function filterByState(stateMarkerArr) {
  $('#state-select').on('change', function() {
    var stateCode = $(this).val();
    $('.locations-table .locations-div').hide();
    $.each($('.locations-table .locations-div.filtered-location'), function(index, thisLocation) {
      var addressText = $(thisLocation).find('h4').text();
      if (addressText.indexOf(stateCode) > -1) {
        $(thisLocation).show();
      }
    });
    clearMarkers();
    $.each(stateMarkerArr, function(index, thisStateMarker) {
      if (thisStateMarker.state == stateCode) {
        thisStateMarker.setMap(map);
      }
    });
  });
}

function adjustPlottedMarkersToBounds(allArr) {
  google.maps.event.addListener(map, 'bounds_changed', function() {
    removeExtraneousMarkers();
    var markersArrStateFilter = [];
    for (var i = 0; i < allArr.length; i++) {
      if (map.getBounds().contains(allArr[i].getPosition())) {
        // markers[i] in visible bounds
        markersArrStateFilter.push(allArr[i]);
        allArr[i].setMap(map);
        $.each(originalStores, function(index, thisStore) {
          if (thisStore.Store == allArr[i].title) {
            plotTableRow(thisStore, "filtered-location");
          }
        });
      } else {
        // markers[i] is not in visible bounds
        allArr[i].setMap(null);
      }
    }
    filterByState(markersArrStateFilter);
  });
};

function removeExtraneousMarkers() {
  $('.locations-div').remove()
  $('#state-select').val('').change();
}

// Sets the map on all markers in the array.
function setMapOnAll(map) {
  for (var i = 0; i < markersArr.length; i++) {
    markersArr[i].setMap(map);
  }
}

// Removes the markers from the map, but keeps them in the array.
function clearMarkers() {
  setMapOnAll(null);
}

function deleteMarkers() {
  clearMarkers();
  markersArr = [];
}

function findState(subStr) {
  if (subStr.indexOf('OH') > -1) {
    return 'OH';
  } else if (subStr.indexOf('IL') > -1) {
    return 'IL';
  } else if (subStr.indexOf('MO') > -1) {
    return 'MO';
  } else if (subStr.indexOf('MI') > -1) {
    return 'MI';
  } else if (subStr.indexOf('IN') > -1) {
    return 'IN';
  }
}

function plotTableRow(thisStore, addedClass) {
  $('.locations-table').append('<div class="columns small-12 medium-6 locations-div ' + addedClass + '"><div class="row"><div class="columns small-3"><img src="https://cdn1.iconfinder.com/data/icons/mirrored-twins-icon-set-hollow/512/PixelKit_point_marker_icon.png"></div><div class="columns small-9"><h3>Marker</h3><h4>' + thisStore.Address + '</h4></div></div></div>');
};

请在此处查看：http://codepen.io/maudulus/pen/oxNXod

Answer 1

一个问题是这个代码只显示标记，如果它们与状态不匹配则不会隐藏它们，看起来clearMarkers看起来不像你想的那样：

function filterByState(stateMarkerArr) {
  $('#state-select').on('change', function() {
    var stateCode = $(this).val();
    $('.locations-table .locations-div').hide();
    $.each($('.locations-table .locations-div.filtered-location'), function(index, thisLocation) {
      var addressText = $(thisLocation).find('h4').text();
      if (addressText.indexOf(stateCode) > -1) {
        $(thisLocation).show();
      }
    });
    clearMarkers();
    $.each(stateMarkerArr, function(index, thisStateMarker) {
      if (thisStateMarker.state == stateCode) {
        thisStateMarker.setMap(map);
      } 
    });
  });
}

在if (thisStateMarker.state == stateCode) {

中添加其他内容

function filterByState(stateMarkerArr) {
  $('#state-select').on('change', function() {
    var stateCode = $(this).val();
    $('.locations-table .locations-div').hide();
    $.each($('.locations-table .locations-div.filtered-location'), function(index, thisLocation) {
      var addressText = $(thisLocation).find('h4').text();
      if (addressText.indexOf(stateCode) > -1) {
        $(thisLocation).show();
      }
    });
    clearMarkers();
    $.each(stateMarkerArr, function(index, thisStateMarker) {
      if (thisStateMarker.state == stateCode) {
        thisStateMarker.setMap(map);
      } else {
        thisStateMarker.setMap(null);
      }
    });
  });
}

按状态过滤标记结合地方自动填充功能 - Google Maps JavaScript API

1 个答案: