如何根据两地经纬度计算方向并绘制旋转Div连线？

问题1：如何根据两座城市的经纬度计算方向？ #

要计算两座城市的相对方向，我们可以先将经纬度转换为对应地图上的像素坐标，再通过三角函数计算角度值。核心思路是把地理坐标映射到地图的平面像素坐标，再利用atan2函数计算两点连线的角度，最终转换为常用的角度单位（度）。

问题2：实现两地经纬度到角度（deg）和宽度的转换代码 #

这里提供PHP+HTML的完整实现方案，先通过PHP处理坐标转换、距离与角度计算，再用HTML渲染地图和两地连线：

PHP代码（坐标转换与计算逻辑） #

function getlocationcoords($lat, $lon) { 
    // 对应所使用世界地图的高度和宽度
    $height = 1096; 
    $width = 543; 
    // 将经度转换为地图X轴像素坐标
    $x = (($lon + 180) * ($width / 360)); 
    // 将纬度转换为地图Y轴像素坐标（调整偏移量适配地图）
    $y = ((($lat * -1) + 90) * ($height / 180)) - 7; 
    return array("x" => round($x), "y" => round($y)); 
} 

// 转换出发城市的经纬度为像素坐标
$latlongfrom = getlocationcoords($cityfrom->latitude, $cityfrom->longitude); 
// 转换目标城市的经纬度为像素坐标
$latlongto = getlocationcoords($cityto->latitude, $cityto->longitude); 

// 计算两点间的像素距离（作为连线的长度）
$width = hypot($latlongto['y'] - $latlongfrom['y'], $latlongto['x'] - $latlongfrom['x']); 
// 计算连线的角度（修正了原代码参数错误，确保方向计算准确）
$deg = atan2($latlongto['y'] - $latlongfrom['y'], $latlongto['x'] - $latlongfrom['x']) * 180 / M_PI; 

HTML代码（地图与连线渲染） #

<div class="col-md-12 col-sm-12 col-xs-12" style=" overflow: hidden;"> 
    <img id="worldmap" src="<?php echo base_url('uploads/worldmap5.png'); ?>" alt="worldmap" title="World map"> 
    <div class="line" style="width: <?php echo $width ?>px;left: <?php echo $latlongfrom['x'] ?>px; top: <?php echo $latlongfrom['y'] ?>px; transform: rotate(<?php echo $deg ?>deg);border-bottom: 5px solid rgb(214, 0, 4); border-top-color: rgb(214, 0, 4); border-right-color: rgb(214, 0, 4); border-left-color: rgb(214, 0, 4); position: absolute; z-index: 1001;"></div> 
</div>

小提示：原代码中transform: rotate的单位误用了rad，这里修正为deg，因为我们计算出的是角度值；同时修正了atan2的参数顺序，确保方向计算的准确性。

地图效果示意图 #

内容的提问来源于stack exchange，提问作者Vies1969