排序标记在谷歌地图根据用户的位置

sorting marker in google map according to user location

本文关键字：用户 位置 谷歌地图 排序      更新时间：2023-09-26

我有一个事件列表，我显示为地图上的标记(其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);
    };
};

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

https://developers.google.com/maps/documentation/javascript/reference球形

筛选标记的代码快照可能类似于

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时添加libraries=geometry参数

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

相关文章：