谷歌地图中最近的 5 个位置（标记）

Question

我使用谷歌地图将我的 json 标记放在地图中 ( this is my map website ) 这是我的主要代码

function initialize(pram) {

var mapOptions = {
    center: new google.maps.LatLng(33.3118943, 44.4959916),
    zoom: 11,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};

var infoWindow = new google.maps.InfoWindow();
var map = new google.maps.Map(document.getElementById("map"), mapOptions);

$.getJSON('data.php?search=' + pram, function (data) {

    $.each(data.points, function (i, value) {

        var marker = new google.maps.Marker({
            position: new google.maps.LatLng(value.lat, value.lon),
            map: map
        });

        google.maps.event.addListener(marker, 'click', portInfo);

        function portInfo() {
            $("#moreInfoId").html(value.id);
            $("#moreInfoPortName").html(value.port_name);
            $("#moreInfoTime").html(value.time);
            $('#mapModal').modal();
        }
    });
});

}

我只想在单击标记时获得最近的 5 个标记 我该怎么做？

Answer 1

一种方法可能是有一些逻辑来确定两点之间的距离。然后使用该逻辑对标记数组进行排序（您必须将它们存储在数组中）并检索前五个。

Sort 将它使用的两个对象作为参数进行比较，因此您需要部分应用您作为参考的对象来计算距离。这可能是执行排序的逻辑：

function distance(p1, p2) {
  return Math.sqrt(Math.pow((p2.lat - p1.lat), 2) + Math.pow((p2.lon - p1.lon), 2));
}

function sortByDistance(me, a, b) {
  return a === me ? 1 :  b === me ? -1 : distance(me, a) - distance(me, b);
}

var dummy = [{lat: 6, lon: 6}, {lat: 7, lon: 1}, {lat: 1, lon: 8}, {lat: 9, lon: 10}, {lat: 5, lon: 4}, {lat: 3, lon: 2}, {lat: 6, lon: 7}, {lat: 2, lon: 7}, {lat: 10, lon: 9}, {lat: 4, lon: 3}];

dummy.forEach(function(me) {
  console.log('My five nearest points are:');
  console.log(dummy.sort(sortByDistance.bind(null, me)).slice(0, 5));
});

那么你会在你的逻辑中使用这个逻辑：

function initialize(pram) {

  var mapOptions = {
    center: new google.maps.LatLng(33.3118943, 44.4959916),
    zoom: 11,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  var infoWindow = new google.maps.InfoWindow();
  var map = new google.maps.Map(document.getElementById("map"), mapOptions);

  $.getJSON('data.php?search=' + pram, function(data) {
    // Array to store the markers.
    var markers = [];
    $.each(data.points, function(i, value) {

      var marker = new google.maps.Marker({
        position: new google.maps.LatLng(value.lat, value.lon),
        map: map
      });

      // Store the marker in the array
      markers.push(marker);
      google.maps.event.addListener(marker, 'click', portInfo);

      function portInfo() {
        // Use the functions I presented earlier to sort the array and retrieve the nearest five
        var nearestFive = markers.sort(sortByDistance.bind(null, value)).slice(0, 5);
        $("#moreInfoId").html(value.id);
        $("#moreInfoPortName").html(value.port_name);
        $("#moreInfoTime").html(value.time);
        $('#mapModal').modal();
      }
    });
  });

}

这将是主要思想。我想您必须进行一些调整并测试它是否表现良好，但是为了检索最近的五个，您需要根据与某个值的距离对数组进行排序。为了提高性能，您可以以某种方式将其存储在接近 5 的位置，以避免在用户单击标记时重新计算它们，但这是我留给您的。

希望对你有帮助。