根据距离筛选 Google 个地图标记

Question

我正在考虑根据与用户当前位置的距离过滤 google 地图标记。我已将此设置为从数据库中引入标记并显示在地图上，但我想将这些标记的显示限制为 only show markers with 3 miles of the user current location .

我收到 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，但我什至不知道从哪里开始，因为我是 Google 地图的新手 API?我相信应用 haversine 公式方法可以在那里工作，但再次不确定它是如何工作的？

感谢任何帮助，谢谢！

Answer 1

这个问题的答案非常简单，并且与评论中的建议一致。

为当前用户提取位置是这样完成的

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

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

根据距离筛选 Google 个地图标记

Filter Google Maps Markers based on Distance

json

google-maps

haversine

google-maps-api-3

google-maps-markers