根据用户位置在谷歌地图中排序标记答案

【问题标题】：sorting marker in google map according to user location根据用户位置在谷歌地图中排序标记
【发布时间】：2017-03-28 05:04:33
【问题描述】：

我有一个事件列表，我在地图（其 Web 应用程序/站点）上显示为标记，我想只显示距用户当前位置一定距离（10 公里）内的事件那么，我该如何结合这 2

//User Location
        if (navigator.geolocation)
        {
        navigator.geolocation.getCurrentPosition(
        function (position) {
            var currentLatitude = position.coords.latitude;
            var currentLongitude = position.coords.longitude;
            //   alert ("Latitude"+currentLatitude+"Longitude"+currentLongitude);window.mapServiceProvider(position.coords.latitude,position.coords.longitude);
            //   console.log(position);
        }

                );
        }


   //List of location from the Db.
var markers = @Html.Raw(Json.Encode(Model.UpcomingLectureGigs));
//Set All merkers on the map 
window.onload = function (a) {

    var mapOptions = {
        center: new window.google.maps.LatLng(window.markers[0].Latitude, window.markers[0].Longitude),
        zoom: 12,
        mapTypeId: window.google.maps.MapTypeId.ROADMAP
    };
    var infoWindow = new window.google.maps.InfoWindow();


    var map = new window.google.maps.Map(document.getElementById("dvMap"), mapOptions);
    for (var i = 0; i < window.markers.length; i++) {
        var data = window.markers[i];

        var myLatlng = new window.google.maps.LatLng(data.Latitude, data.Longitude);
        // console.log(data.Latitude, data.Longitude);
        var marker = new window.google.maps.Marker({
            position: myLatlng,
            draggable: true,
            animation: google.maps.Animation.DROP,
            get map() { return map; }
        });
        (function (marker, data) {
            window.google.maps.event.addListener(marker,
                "click",
                function (e) {

                    infoWindow.setContent(data
                        .Venue +
                        " " +
                        data.Genre.Name +
                        " " +
                        data.DateTime.toString("dd/mm/yy"));
                    //.toISOString().split("T")[0]);
                    //  .format('MM/DD h:mm');

                    infoWindow.open(map, marker);
                });
        })(marker, data);
    };
};

【问题讨论】：

标签： javascript asp.net-mvc google-maps google-maps-api-3 geolocation

【解决方案1】：

您可以使用几何库来计算用户位置和标记之间的距离（以米为单位）。

https://developers.google.com/maps/documentation/javascript/reference#spherical

过滤标记的代码快照可能类似于

var markers_filtered = markers.filter(function(marker, index, array) {
    var myLatlng = new window.google.maps.LatLng(marker.Latitude, marker.Longitude);
    return google.maps.geometry.spherical.computeDistanceBetween(userLatLng, myLatlng) < 10000; 
});
for (var i = 0; i < markers_filtered.length; i++) {
   //Your stuff here
}

您应该在加载 Maps JavaScript API 时添加 library=geometry 参数。

https://developers.google.com/maps/documentation/javascript/geometry

【讨论】：