半径/最近的结果 - Google Maps API [英] Radius/nearest results - Google Maps API

问题描述

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

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

I请求一个有效的代码，教程或关于如何做到这一点的文章。 JSFiddle演示：

我想这是实现它的一种方法。您可以使用 Google地图V3 API圈创建从您的中心点或当前位置开始。您可以使用 setRadius（radius：number）指定以米为单位的圆的半径。使用创建的圆圈，您可以循环使用标记，并使用 Circle的getBounds对象，它是一个LatLngBounds 并检查标记是否在绑定内。

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

$ p $ 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（）;

//过滤标记
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）;
}


First of all I'm using Google Maps API v3. I have one big map that shows all the results pulled from a database, now I like to implement a feature that shows a radius of nearest results within X kilometres from the current location (served by HTML5 geolocation).

As the map contains all the results, I want to be able to add X kilometres, then it will get submitted that results will be returned the nearest results according to the current location of the user. The whole map should then remove all the out-of-radius markers, leaving the markers that are inside a radius of X kilometres.

I'm requesting an effective code, tutorial or an article on how to do this.

解决方案

Here the JSFiddle Demo:

I suppose this is one way to do it. You can use Google Map V3 API's circle to create the bounds from your center point or current location. You can specify the radius of the circle in meters with setRadius(radius:number). With the created circle you can loop through your markers and see if they are within the circle's bound using Circle's getBounds object which is a LatLngBounds and check if the marker is within bound or not.

I went ahead and created a small demo that has five points on a map, and when you click on the create circle button it'll make the first marker the center point and draws a circle with a radius of 5000 and filters out the markers that are not with in bound using the method described above:

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);
}

这篇关于半径/最近的结果 - Google Maps API的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！