根据三个标记的坐标制作圆圈

Question

我在 Google 地图中有三个标记，我想创建一个圆周与所有三个标记相连的圆。我有以下接收三个标记作为参数的函数（我从 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 created an example that implements the function with draggable markers and put it in this JSFiddle link. Thanks geocodezip!

根据三个标记的坐标制作圆圈

Make circle from the coordinates of three markers

javascript

algorithm

google-maps

google-maps-api-3

google-maps-api-2