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

Question

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

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

我正在请求有效的代码,教程或有关如何执行此操作的文章.

Answer 1

这里的JSFiddle演示:

我想这是一种方法.您可以使用Google Map V3 API的圆圈创建中心点或当前位置的边界.您可以使用以米为单位指定圆的半径setRadius(radius:number).使用创建的圆圈,您可以循环标记并使用Circle的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);
}