根据距离过滤谷歌地图标记

Posted 2023-02-23

【中文标题】根据距离过滤谷歌地图标记

【英文标题】：Filter Google Maps Markers based on Distance

【发布时间】：2021-03-29 00:59:50

【问题描述】：

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

我收到 JSON 格式的标记（带有纬度+经度详细信息），如下所示：

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 Maps API 的新手？我相信应用haversine公式方法可以在那里工作，但同样，不确定这将如何工作？

任何帮助表示赞赏，谢谢！

【问题讨论】：

我认为处理这个问题的最有效方法是过滤 JSON - 如果你这么说......你为什么不分享你的 JSON 样本？它是否已经包含距离？您必须提供允许重现问题的minimal reproducible example（或者了解您要处理的内容）。实施 Haversine 公式有什么问题？等等等等等等。你的问题，事实上，太宽泛、不清楚和离题了。

JSN 从何而来？如果它来自数据库（或允许将数据限制为与某个点的距离的服务），那将更有效。获得两组数据后，您可以在显示标记之前在浏览器中进行检查。

@MrUpsidown 感谢您的添加 - 我已经包含了上面的示例，我认为这是您正在寻找的，但我是新手，所以让我知道这是否可以接受？所有数据都存储在一个 SQL 数据库，所以技术上的过滤可以在数据库中的纬度/经度上完成，但是我需要传递用户的位置并在 PHP 中处理，现在我认为这有点太复杂了，不是吗？

如果您的 JSON 包含比方说 50 个不同的位置（坐标集），那么您将需要在客户端运行 50 次距离计算，或者通过您自己的计算方法，或者通过 API它具有相应的功能。相反，如果您将用户的坐标传递给您的 PHP 脚本，并使用 Haversine 公式检索位置列表，那么这一切都在您的数据库中的 1 个请求中完成。很可能更高效，更快（并且更清洁）。没那么复杂。您只需复制查询并使其适应您的需要。

有关于如何在数据库中按距离过滤数据的教程。如果启用 GIS，它会更简单。您可以在请求 JSON 数据时将用户位置（可能还有过滤距离）传回您的服务器。

【参考方案1】：

这个问题的答案很简单，并且符合 cmets 中的建议。

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

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

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