半径/最近的结果 - Google Maps API

Posted 2023-02-23

【中文标题】半径/最近的结果 - Google Maps API

【英文标题】：Radius/nearest results - Google Maps API

【发布时间】：2011-08-10 23:38:43

【问题描述】：

首先，我使用的是 Google Maps API v3。我有一张大地图，显示从数据库中提取的所有结果，现在我想实现一个功能，显示距离当前位置 X 公里内最近结果的半径（由 html5 地理定位提供服务）。

由于地图包含所有结果，我希望能够添加 X 公里，然后提交结果将根据用户当前位置返回最近的结果。然后整个地图应移除所有半径外标记，留下半径 X 公里内的标记。

我要求提供有效的代码、教程或有关如何执行此操作的文章。

【参考方案1】：

这里是JSFiddle Demo:

我想这是一种方法。您可以使用Google Map V3 API's circle 从您的中心点或当前位置创建边界。您可以使用setRadius(radius:number) 指定圆的半径（以米为单位）。使用创建的圆圈，您可以遍历标记并使用Circle's getBounds object which is a LatLngBounds 查看它们是否在圆圈的范围内，并检查标记是否在范围内。

我继续创建了一个在地图上有五个点的小演示，当您单击创建圆按钮时，它会将第一个标记作为中心点并绘制一个半径为 5000 的圆并过滤掉使用上述方法未绑定的标记：

function createRadius(dist) 
    var myCircle = new google.maps.Circle(
        center: markerArray[markerArray.length - 1].getPosition(),
        map: map,
        radius: dist,
        strokeColor: "#FF0000",
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: "#FF0000",
        fillOpacity: 0.35
    );
    var myBounds = myCircle.getBounds();

    //filters markers
    for(var i=markerArray.length;i--;)
         if(!myBounds.contains(markerArray[i].getPosition()))
             markerArray[i].setMap(null);
    
    map.setCenter(markerArray[markerArray.length - 1].getPosition());
    map.setZoom(map.getZoom()+1);

【讨论】：

关于您的示例的旁注@JSFiddleDemo：每次单击按钮，您都会再次放大并消除不透明度。

【参考方案2】：

这个解决方案只有一个主要缺陷 - 它以矩形而不是圆形获取数据。

如果您不想查询超出要求的数据 - 在 SQL 中使用 haversine formula：

SELECT
    id,
    (3959 *
        acos(
            cos(radians(37)) *
            cos(radians(lat)) *
            cos(radians(lng) - radians(-122)) +
            sin(radians(37)) *
            sin(radians(lat))
        )
    ) AS distance
FROM markers
HAVING distance < 25
ORDER BY distance
LIMIT 0 , 20;

也结帐Creating a Store Locator with php, mysql & Google Maps