当前位置：文江博客话题详情

js开发百度地图

发布于 2021-12-03 02:32:39 字数 69 浏览 904 评论 4

在地图上随便点两个点然后默认生成第三个点，但是第三个点不需要在地图上显示，接着这三个点生成一个直角三角形，请问代码怎么实现？

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

谢绝鈎搭 2021-12-09 14:45:12

两种可能，你要的是哪一种？

平面(地图)上的任意两点所构成的线段，可以是一个确定园的直径，第三个"不需要在地图上显示"的点必定落在除这两点位置之外的圆周上，才能生成一个直角三角形。第三个"不需要在地图上显示"点的可能位置，必定在这个圆周之上。
平面(地图)上的任意两点, 若要与第三个点构成一个直角三角形，那这个"不需要在地图上显示"的点也可能落在一条与头两个点构成的线段垂直，并且经过其中一个点的直线上。

回复收藏 0

妖妓 2021-12-09 14:28:21

提示：平面(地图)上的任意两点，就能成为一个确定园的直径，第三个"不需要在地图上显示"的点必定落在除这两点位置之外的圆周上，才能生成一个直角三角形。第三个点的可能位置，必定在这个圆周之上。代码经修改如下。由鼠标获取的数据，仍然需要稍加修改，

p2 = new Point(event.clientX-6, event.clientY-6);

才能保证鼠标点到的位置，是红圆点的圆心。这是为何？

<html>
<head>
<script type="text/javascript">
var Point = function ( x,y ) { //类 Point 的 构造方法
  this.x=x;
  this.y=y;
};
var p1,p2,count=1;;
function cli(event){
var can = document.getElementById("drawingCanvas");
var g = can.getContext('2d');
	if (count==1){
	g.fillStyle="white";
	g.fillRect(0,0, can.width, can.height);
	g.fillStyle="red";
	p1 = new Point(event.clientX-6, event.clientY-6);
	g.beginPath();
	g.arc( p1.x, p1.y, 3, 0, Math.PI*2);
	g.fill();
	count++;
	} else if (count==2){
	p2 = new Point(event.clientX-6, event.clientY-6);
	g.fillStyle="red";
	g.arc(p2.x,p2.y,3,0,Math.PI*2);
	g.fill();
	g.beginPath();
	g.arc( p1.x + (p2.x-p1.x)/2, p1.y+(p2.y-p1.y)/2,
	Math.sqrt(Math.pow((p1.x-p2.x),2) + Math.pow((p1.y-p2.y),2))/2,
	0, Math.PI*2); 
	g.stroke();
	count=1;
	}		
}

function get_coor(event){
var p= new Point(event.clientX-6, event.clientY-6);
return p;
}
</script>
</head>
<body onmousedown=" cli(event)">
<canvas id="drawingCanvas" width="800" height="800">
</body>
</html>

回复收藏 0

南冥有猫 2021-12-09 14:06:05

地图上一般都会有坐标系，可以转换程几何题，用程序实现数学算法，应该是这个思路吧

回复收藏 0

樱花落人离去 2021-12-09 06:44:39

提示：平面(地图)上的任意两点，就能成为一个确定园的直径，第三个"不需要在地图上显示"的点必定落在除这两点位置之外的圆周上，才能生成一个直角三角形。第三个点的可能位置，必定在这个圆周之上。

<html>
<head>
<style>

#drawingCanvas{
	position:absolute;
	top:0px;
	left:0px;
	border:solid thick #FF0;	
}	
</style>
<script type="text/javascript">

var Point = function ( x,y ) { //类 Point 的 构造方法
  this.x=x;
  this.y=y;
};

var p1,p2,count=1;;
function cli(){
var can = document.getElementById("drawingCanvas");
var g = can.getContext('2d');
	if (count==1){
		g.fillStyle="white";
		g.fillRect(0,0, can.width, can.height);
	g.fillStyle="red";
	p1 = coordinates(event);
	g.beginPath();
	g.arc( p1.x, p1.y, 3, 0, Math.PI*2);
	g.fill();
	count++;
	} else if (count==2){
	p2 =  coordinates(event);
	g.fillStyle="red";
	g.arc(p2.x,p2.y,3,0,Math.PI*2);
	g.fill();
	g.beginPath();
	g.arc( p1.x + (p2.x-p1.x)/2, p1.y+(p2.y-p1.y)/2,
	Math.sqrt(Math.pow((p1.x-p2.x),2) + Math.pow((p1.y-p2.y),2))/2,
	0, Math.PI*2); 
	g.stroke();
	count=1;
	}		
}

function coordinates(event){
x=event.screenX-3;
y=event.screenY-97;
var p= new Point(x,y);
return p;
}
</script>
</head>
<body onmousedown=" cli()">
<div id="show"></div>
<canvas id="drawingCanvas" width="500" height="300">
</body>
</html>

疑点：经过测试，发现鼠标点击的位置，与实际获得的x,y坐标数据存在系统的差别，因此将函数 coordinate(event)中获取的 x, y 数值的代码，相应进行了修正。这个误差是从何而来的呢？

回复收藏 0

~没有更多了~