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

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

1 个答案: