首页 > 解决方案 > 从滚动的传单地图中获取真实坐标

问题描述

我正在使用 React 传单。当用户单击地图时,我会检索坐标并在其上设置一个标记。一切都在地图上工作,但地图被用作检索设定位置的天气数据的一种方式。

解释

这是一张可能有助于说明我面临的问题的图片 经度偏移的地图

在顶部,我为每一块“地球”添加了经度值。

有一个带有“真实”经度的标记,即 -0.09°

在左侧地球上,同一位置将返回 -360.09° 经度

在右侧地球上,同一位置将返回 359.91° 经度

我用这段代码检索纬度和经度:

setMarker = e => {
    this.props.updateLocation({
      lat: e.latlng.lat,
      lng: e.latlng.lng,
    })
}

问题

我面临的问题是,如果我将经度值传递给超出允许范围(> -180° && < 180°)的天气 API,它不会返回任何内容,当然会导致该经度,不存在。

是否有返回“真实”纬度和经度的方法?

如果这不存在,我该如何禁用地图滚动(只允许出现一个地球)?或者只是允许在第一个地球内放置一个标记?我不确定什么是最好的方法,传单文档让我感到困惑,因为我不理解一些术语。

标签: leafletreact-leaflet

解决方案


经过更多搜索后,我发现了一个完全符合我要求的内置方法。

在这个 GitHub 问题上找到它https://github.com/Leaflet/Leaflet/issues/1885#issuecomment-91395167

要在鼠标单击时获得实际的纬度和经度,无论您在哪个地球上单击,都可以在 latlng 上使用 wrap() 方法:

event.latlng.wrap()

这将返回一个对象,例如

{
  lat: 63.51385990617828,
  lng: 173.671875
}

推荐阅读