谷歌地图围绕半径搜索绘制圆圈

Question

我正在画一个半径大小的圆，在该圆上执行附近搜索：

  // Point where to search  
  var searchArea = new google.maps.LatLng(25.435833800555567, -80.44189453125);

  // Draw a circle around the radius
  var circle = new google.maps.Circle({
    center: searchArea,
    radius: parseFloat(document.getElementById("distance").value) * 1609.3, //convert miles to meters
    strokeColor: "#0000FF",
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: "#0000FF",
    fillOpacity: 0.4
   });          
   circle.setMap(map);  

   // Perform search over radius
   var request = {
        location: searchArea,
        radius: parseFloat(document.getElementById("distance").value) * 1609.3, //convert miles to meters
        keyword: "coffee",
        rankBy: google.maps.places.RankBy.PROMINENCE
      };
      service.nearbySearch(request, callback);         
    }

然后我绘制标记。这很好用，但在某些情况下，标记显示在圆圈之外，让我相信它的大小可能与半径不同。

这是我的意思的一个很好的例子。

http://jsfiddle.net/hnPRh/2/

注意标记是如何显示在圆圈之外的。为什么会这样？

Answer 1

我会这样做的方法是计算到中心点的距离。我已将您的半径设置为一个名为 RADIUS 的变量，请确保将其放置在文档加载后执行的位置。

我还修改了您的 for 循环以包括距离检查。 distance 函数接受两个类型为 google.maps.LatLng 的参数

var EARTH_RADIUS = 6378137; // meters
var RADIUS = (parseFloat(document.getElementById("distance").value) * 1609.3);

function deg2rad(deg) {
    return deg * (Math.PI / 180);
}

function distance(pos1, pos2) {
    var p1Lat = pos1.lat(),
        p1Lng = pos1.lng(),
        p2Lat = pos2.lat(),
        p2Lng = pos2.lng(),

        dLat = deg2rad(p1Lat-p2Lat),
        dLon = deg2rad(p1Lng-p2Lng),

        a = Math.sin(dLat/2) * Math.sin(dLat/2) + Math.sin(dLon/2) * Math.sin(dLon/2) * Math.cos(deg2rad(p1Lat)) * Math.cos(deg2rad(p2Lat));

    return EARTH_RADIUS * (2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a)));
}



for (var i = 0; i < results.length; i++) {
    if (distance(results[i].geometry.location, searchArea) <= RADIUS) {
        createMarker(results[i]);
    }
}