用纬度或经度指示器反应传单标记位置

Posted 2023-02-23

【中文标题】用纬度或经度指示器反应传单标记位置

【英文标题】：React leaflet Marker position with latitude OR longitude indicator

【发布时间】：2021-06-12 17:05:27

【问题描述】：

我一直在使用带有 Int/Float 坐标的反应传单成功，例如 [51.505, -0.09] 但是，我的坐标中包含经度和纬度指示器，例如 ['51.505W', '-0.09S']。

第一个选项在此代码中运行良好。

const position = [51.505, -0.09]
        
render(
  <MapContainer center=position zoom=13 scrollWheelZoom=false>
    <TileLayer
      attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
      url="https://s.tile.openstreetmap.org/z/x/y.png"
    />
    <Marker position=position>
      <Popup>
        A pretty CSS3 popup. <br /> Easily customizable.
      </Popup>
    </Marker>
  </MapContainer>
)

第二个选项因错误而中断Invalid LatLng 对象如何最好地处理此问题

【参考方案1】：

Leaflet 以及扩展的 react-leaflet 期望纬度经度为简单数字，可以是由 2 个数字组成的数组 [number, number] 的形式，也可以是 lat: number, lng: number 格式的对象。像['51.505W', '-0.09S'] 这样的坐标不符合这种模式。但是可以通过一个简单的函数轻松地转换它们，从字符串中去除字母字符并返回一个数字：

function transformCoords(pair) 
  return pair.map(coordString => 
    return Number(
      coordString
        .replace('N', '')
        .replace('S', '')
        .replace('E', '')
        .replace('W', '')
    )
  )

这将接受['51.505W', '-0.09S'] 格式的数组，并返回一个类似[51.505, -0.09] 的数组，然后可以将其正确地提供给Marker 位置属性：

const position = ['51.505W', '-0.09S']
        
render(
  <MapContainer ...>
    <Marker position=transformCoords(position) />
  </MapContainer>
)

【讨论】：

感谢@seth 的输入，这两个会给你一个完全不同的位置，更现实的例子是['36.837768E', '1.30315S'] vs ['36.837768', '1.30315']

我建议您阅读Positive/Negative Latitude and Longitude values vs. Cardinal Directions - 如果您使用十进制坐标，您应该使用正负，而不是基本方向字符标记。无论如何，您始终可以翻转带有S 或W 的任何坐标的标志。