如何实现经纬度与度分秒(DMS)转换并在HTML中展示？

你当前代码的核心问题 #

1. 转换方向搞反：你写的ConvertDMSToDD是把DMS转成十进制，但实际需要的是十进制转DMS
2. 字符串处理错误：把'25,514685'拆成单个字符完全不符合逻辑，应该先替换逗号为小数点，转成数字再计算
3. 变量引用错误：longi = this.latitude.split('')应该改为this.longitude
4. 未保存转换结果：仅打印日志无法在HTML中展示最终数据

正确实现代码及说明 #

修改后的TS代码

import { Component } from '@angular/core';

@Component({
  selector: 'app-coordinate-converter',
  templateUrl: './coordinate-converter.component.html',
})
export class CoordinateConverterComponent {
  // 原始十进制经纬度（逗号分隔字符串）
  public latitude = '25,514685';
  public longitude = '-6,890627';
  
  // 存储转换后的DMS结果
  public dmsLatitude: string = '';
  public dmsLongitude: string = '';

  constructor() {
    this.convertDecimalToDMS();
  }

  /**
   * 批量转换经纬度为DMS格式
   */
  convertDecimalToDMS(): void {
    // 处理纬度：替换逗号为小数点，转数字后转换
    const latNum = parseFloat(this.latitude.replace(',', '.'));
    this.dmsLatitude = this.decimalToDMS(latNum, 'lat');
    
    // 处理经度
    const lngNum = parseFloat(this.longitude.replace(',', '.'));
    this.dmsLongitude = this.decimalToDMS(lngNum, 'lng');
  }

  /**
   * 单个坐标的十进制转DMS核心逻辑
   * @param decimal 十进制坐标值
   * @param type 坐标类型：lat（纬度）/ lng（经度）
   * @returns DMS格式字符串，如：25°30'52.87" N
   */
  decimalToDMS(decimal: number, type: 'lat' | 'lng'): string {
    const absValue = Math.abs(decimal);
    
    // 计算度、分、秒
    const degrees = Math.floor(absValue);
    const remaining = (absValue - degrees) * 60;
    const minutes = Math.floor(remaining);
    const seconds = (remaining - minutes) * 60;
    
    // 判断方向
    const direction = type === 'lat' 
      ? (decimal >= 0 ? 'N' : 'S') 
      : (decimal >= 0 ? 'E' : 'W');
    
    // 拼接成标准DMS格式，秒保留两位小数
    return `${degrees}°${minutes}'${seconds.toFixed(2)}" ${direction}`;
  }
}

修改后的HTML代码

<div>
  原始纬度：{{latitude}}
</div>
<div>
  DMS纬度：{{dmsLatitude}}
</div>

<div style="margin-top: 12px;">
  原始经度：{{longitude}}
</div>
<div>
  DMS经度：{{dmsLongitude}}
</div>

关键逻辑说明 #

1. 数据预处理：将原始字符串中的逗号替换为小数点，转成数字才能进行数学计算
2. DMS计算逻辑：
   • 先取坐标绝对值计算度、分、秒，避免符号干扰数值计算
   • 度是坐标的整数部分，剩余部分乘60得到分钟，分钟的剩余部分再乘60得到秒
   • 根据原始坐标的正负判断方向：纬度正为北（N）、负为南（S）；经度正为东（E）、负为西（W）
3. 结果展示：将转换后的DMS字符串存储到类变量中，直接通过Angular插值表达式{{}}在HTML中绑定展示

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