半径/最近结果 - Google 地图 API

Question

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

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

我请求一段有效的代码、教程或文章来完成这个功能。

- MacMac

Answer 1

以下是JSFiddle演示：

我认为这是一种方法。您可以使用 Google Map V3 API的圆形对象从中心点或当前位置创建边界。您可以使用setRadius（radius：number）指定圆的半径（以米为单位）。使用创建的圆，您可以循环遍历标记并查看它们是否在圆形边界内，使用圆形的getBounds对象（它是一个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);
}

- KJYe.Name

---

关于你的@JSFiddleDemo示例的附注：每次点击按钮时，您都会再次放大并去除不透明度。 - kaiser

Answer 2

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

如果您不想查询比所需更多的数据，请在SQL中使用haversine公式：

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;

同时请查看使用PHP、MySQL和Google Maps创建门店定位器

- Martin Zeitler