从三个标记的坐标做圆
Make circle from the coordinates of three markers
我在谷歌地图中有三个标记,我想创建一个圆圈,在其圆周上接触所有三个标记。我有以下函数,它接收三个标记作为参数(我从从三个点找到圆心的算法是什么?
问题是它确实创建了一个圆圈,但它没有触及标记。有什么方法可以改进此代码吗?我需要它尽可能精确。
提前谢谢。
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));
}
数学还可以,但问题是我没有考虑地球的曲率。所以我将 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 创建了一个示例,该示例使用可拖动标记实现该函数,并将其放入此 JSFiddle 链接中。谢谢地理编码!
相关文章:
- 为什么grunt contrib connect的中间件选项的第三个参数是未定义的
- 如何使用PHP和JS级联三个下拉列表
- 灯光问题(使用三个.js)
- 在三个.js中创建球体(例如地球)的磁力线
- 什么'这是从第三个函数上的async 1st函数获得结果的更好方法
- javascript第三个XMLHttpRequest被拒绝.但前两个是允许的
- 将循环中的两个文本框相乘,并在第三个文本框上显示结果
- 根据前两个下拉ID显示第三个下拉列表
- 在数组JS中查找三个重复项
- Meteor和S3:如何通过一次上传/编辑定义三个不同的图像
- 如何替换javascript字符串中的前三个连字符
- 保存两个模型(属于第三个模型)和一个提交
- 将文本字段限制为三个数字
- 三个js键盘旋转
- 匹配三个正则表达式中的任意一个,以先到的为准(在javascript中)
- 加载模型与三个.js
- 从三个标记的坐标做圆
- 获取现场坐标(三个js)
- 顶点在三个.js中移动后坐标几何体
- 三个js获取mesh.lookAt(object);的坐标;