基于距离过滤谷歌地图标记

Question

我正在考虑根据与用户当前位置的距离过滤谷歌地图标记。我将此设置为从数据库中引入标记并显示在地图上，但我想限制这些标记的显示，仅显示距离用户当前位置3英里的标记。

我收到JSON形式的标记（具有lat long详细信息）如下：

function showMarkers(str) {
            if (str == "") {
                document.getElementById("products").innerHTML = "";
                return;
            }
            if (window.XMLHttpRequest) {
                // code for IE7+, Firefox, Chrome, Opera, Safari
                xmlhttp = new XMLHttpRequest();
            } else { // code for IE6, IE5
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.onreadystatechange = function() {
                if (this.readyState == 4 && this.status == 200) {
                    //$('#mapMarkerPositions').html(this.responseText);

                    let data = JSON.parse(this.responseText);
                    merchantMarkers = [];
                    for (let i = 0; i < data.length; i++) {
                        merchantMarkers[i] = data[i];
                    }
                    resetMarker();
                    reloadMarkers();


                }
            }
            xmlhttp.open("GET", "filterMarkers.php?s=" + str, true);
            xmlhttp.send();
        }

收到的JSON示例：

0: [,…]
0: "<a style="margin-left: 8px; font-weight: bold; font-family: Courier, Arial, Helvetica, sans-serif;">TestMerchant1</a><br>
↵   <button class="seeMerchantButton" onclick="showMerchant('TestMerchant1');showProfile();" value="TestMerchant1">See merchant</button>"
1: "51.503366"
2: "-0.223477"
3: "info"
4: {text: "£5", fontFamily: "Courier, Arial, Helvetica, sans-serif"}
fontFamily: "Courier, Arial, Helvetica, sans-serif"
text: "£5"
1: [,…]
0: "<a style="margin-left: 8px; font-weight: bold; font-family: Courier, Arial, Helvetica, sans-serif;">TestMerchant2</a><br>
↵   <button class="seeMerchantButton" onclick="showMerchant('TestMerchant2');showProfile();" value="TestMerchant2">See merchant</button>"
1: "51.503393"
2: "-0.226599"
3: "info"
4: {text: "£3", fontFamily: "Courier, Arial, Helvetica, sans-serif"}
fontFamily: "Courier, Arial, Helvetica, sans-serif"
text: "£3"

我将地图放在用户位置的中心，如下所示：

            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(function(position) {
                    initialLocation = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
                    map.setCenter(initialLocation);
                });
            }

我认为处理这个问题最有效的方法是过滤JSON，但我甚至不知道从哪里开始，因为我对谷歌地图API还不熟悉？我相信应用哈弗森公式的方法学可以在那里奏效，但我还是不确定这是怎么回事？

感谢您的帮助！

Answer 1

对此的回答非常简单，与评论中的建议一致。

提取当前用户的位置是这样做的

function showPosition(position) {
  y.innerHTML = position.coords.latitude + "latlong" + position.coords.longitude;

然后，我将其传递给PHP脚本，并在脚本中使用haversine公式进行过滤，因为它的效率要高得多