如何按城市(位置)Google地图过滤位置数组

时间:2018-03-30 18:31:21

标签: javascript google-maps

我无法在Google地图文档中找到任何文章,希望有人在这里做过或知道如何实现我所需要的。

基本上我有array of locations

数组示例

const array = [
  {
    latitude: 37.783476,
    longitude: -122.425412,
  }
]

现在我需要根据城市(例如旧金山)过滤这个数组。

我怎样才能做到这一点?
任何链接到文档或任何想法非常感谢。

1 个答案:

答案 0 :(得分:2)

您可以使用反向地理编码来实现它。

js fiddle:https://jsfiddle.net/fatty/bdartuph/12/

在这里,我采取了阵列中的两个坐标 - 旧金山和纽约。因此,数组将被您在输入框中写入的城市过滤,并将存储在filteredArray中。

var coordArray = [{
    latitude: 37.783476,
    longitude: -122.425412,
  },
  {
    latitude: 40.730885,
    longitude: -73.997383,
  }
];

$("#btn").click(function() {
  var filteredArray = [];
  var cityName = $("#cityName").val();
  var geocoder = new google.maps.Geocoder();

  for (var i = 0; i < coordArray.length; i++) {
    var latlng = new google.maps.LatLng(coordArray[i].latitude, coordArray[i].longitude);
    geocoder.geocode({
      'latLng': latlng
    }, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        var address = results[0].formatted_address.split(',');
        alert("" + address[1]);
        if (address[1].toLocaleLowerCase().trim() == cityName.toLocaleLowerCase()) {
          filteredArray.push(coordArray[i]);
        }
      } else {
        alert("Geocoder failed due to: " + status);
      }
    });
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>

<input id="cityName" type="text" placeholder="write city name">
<input id="btn" type="button" value="filter coordinates" />