Question

我在谷歌地图上有三个标记，我想创建一个圆圈，触及周围的所有三个。我有以下函数接收三个标记作为参数（我从What is the algorithm for finding the center of a circle from three points?借用了算法）。

问题在于它确实创建了一个圆圈，但它并没有触及标记。有没有办法改进这段代码？我需要尽可能精确。

提前致谢。

function drawCircleDel(a, b, c) {
    a_x = a.getPosition().lng();
    a_y = a.getPosition().lat();
    b_x = b.getPosition().lng();
    b_y = b.getPosition().lat();
    c_x = c.getPosition().lng();
    c_y = c.getPosition().lat();
    var yDelta_a = b_y - a_y;
    var xDelta_a = b_x - a_x;
    var yDelta_b = c_y - b_y;
    var xDelta_b = c_x - b_x;
    var aSlope = ((yDelta_a)/(xDelta_a));
    var bSlope = ((yDelta_b)/(xDelta_b));
    var center_x = (aSlope*bSlope*(a_y - c_y) + bSlope*(a_x + b_x) - aSlope*(b_x + c_x))/(2*(bSlope - aSlope));
    var center_y = -1*(center_x - (a_x + b_x) / 2) / aSlope + (a_y + b_y)/2;
    var distanceA = google.maps.geometry.spherical.computeDistanceBetween(new google.maps.LatLng(center_y, center_x), a.getPosition());
    var distanceB = google.maps.geometry.spherical.computeDistanceBetween(new google.maps.LatLng(center_y, center_x), b.getPosition());
    var distanceC = google.maps.geometry.spherical.computeDistanceBetween(new google.maps.LatLng(center_y, center_x), c.getPosition());
    var circleOptions = {
        strokeColor: '#FFFFFF',
        strokeOpacity: 0.5,
        strokeWeight: 2,
        fillColor: '#FFFFFF',
        fillOpacity: 0.25,
        map: map,
        center: new google.maps.LatLng(center_y, center_x),
        radius: (distanceA + distanceB + distanceC)/3,
        clickable: false,
        zIndex: 1
    };
    window.circlesRNG.push(new google.maps.Circle(circleOptions));
}

Answer 1

数学还可以，但问题是我没有考虑到地球的曲率。所以我将LatLng坐标转换为点，找到了中心，然后做了反向。这是更新的功能：

function drawCircleDel(a, b, c) {
var pixelA = map.getProjection().fromLatLngToPoint(a.getPosition());
var pixelB = map.getProjection().fromLatLngToPoint(b.getPosition());
var pixelC = map.getProjection().fromLatLngToPoint(c.getPosition());
var a_x = pixelA.x;
var a_y = pixelA.y;
var b_x = pixelB.x;
var b_y = pixelB.y;
var c_x = pixelC.x;
var c_y = pixelC.y;
var aSlope = (b_y - a_y)/(b_x - a_x);
var bSlope = (c_y - b_y)/(c_x - b_x);
var center_x = (aSlope*bSlope*(a_y - c_y) + bSlope*(a_x + b_x) - aSlope*(b_x + c_x))/(2*(bSlope - aSlope));
var center_y = -1*(center_x - (a_x + b_x)/2)/aSlope + (a_y + b_y)/2;
var center = map.getProjection().fromPointToLatLng(new google.maps.Point(center_x, center_y));
var distance = google.maps.geometry.spherical.computeDistanceBetween(center, a.getPosition());
var circleOptions = {
    strokeColor: '#FFFFFF',
    strokeOpacity: 0.5,
    strokeWeight: 2,
    fillColor: '#FFFFFF',
    fillOpacity: 0.25,
    map: map,
    center: center,
    radius: distance,
    clickable: false,
    zIndex: 1
};
window.circlesRNG.push(new google.maps.Circle(circleOptions));
}

此外，用户geocodezip创建了一个示例，该示例使用可拖动标记实现该功能并将其放在this JSFiddle link中。谢谢geocodezip！

从三个标记的坐标创建圆

1 个答案: