必应地图标记点方向

最新推荐文章于 2024-06-14 17:16:08 发布

byggchongya

最新推荐文章于 2024-06-14 17:16:08 发布

阅读量715

点赞数

分类专栏： bingmap 文章标签： javascript

本文链接：https://blog.youkuaiyun.com/qq_31120499/article/details/121206859

版权

bingmap 专栏收录该内容

1 篇文章

订阅专栏

该博客介绍了一种方法，通过获取起始坐标点和目标坐标点的经纬度偏角来旋转图像。首先，利用getAngle函数计算两点之间的角度，然后将角度转换为弧度用于图像旋转。在图像加载完成后，使用canvas进行旋转并绘制，最后将旋转后的图像作为Pushpin的图标添加到地图上。该示例适用于地图应用中需要根据方向信息动态调整标记方向的场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

标记点方向使用旋转图像来实现，获取起始坐标点和目标坐标点的经纬度偏角，根据角度来旋转图像。

获取经纬度偏角参考下方文章：
https://blog.youkuaiyun.com/weixin_35958783/article/details/113020777

参数说明：p1起始坐标点，p2目标坐标点
获取经纬度偏角代码

绘制图像参考下方必应地图demo:
http://www.bingmap.cn/demos/2bba918d-30c5-479a-a33d-a15aa26772bd?module=demo

function setPlaneMarker(point, pointNext, type){
	var p1 = new Microsoft.Maps.Point(point.latitude, point.longitude);
	var p2 = new Microsoft.Maps.Point(pointNext.latitude, pointNext.longitude);
	var angle = getAngle(p1,p2) * Math.PI / 180;
	
	var pointPosition = point;
	if(type == 2){
	    pointPosition = pointNext;
	}
	
	var img = new Image();
	img.src = "/static/images/icon/plane-end.png";
	var c = document.createElement('canvas');
	img.onload = function () {
	    var rotationAngleRads = angle;
	
	    //Calculate rotated image size.
	    c.width = 58;
	    c.height = 58;
	
	    var context = c.getContext('2d');
	
	    //Move to the center of the canvas.
	    context.translate(c.width / 2, c.height / 2);
	
	    //Rotate the canvas to the specified angle in degrees.
	    context.rotate(rotationAngleRads);
	
	    //Draw the image, since the context is rotated, the image will be rotated also.
	    context.drawImage(img, -img.width / 2, -img.height / 2);
	
	    var marker = new Microsoft.Maps.Pushpin(pointPosition, {
	        icon: c.toDataURL(),
	        anchor: new Microsoft.Maps.Point(c.width / 2, c.height / 2)
	    });
	    //Add the pushpin to the map
	    map.entities.push(marker);
	};
}