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

Question

我一直在使用带有 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 对象如何最好地处理此问题

Answer 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>
)