Question

我正在使用react-native-maps库生成带有一些标记和圆形的mapview，我希望能够适合mapview的范围，以包括圆圈，而不仅仅是地图上的标记。有人有类似的东西可以工作吗？

以下是显示我在react-native中拥有的当前设置的小吃

https://snack.expo.io/@jordanr/fittoelements-issue

Answer 1

fitToElements也不适用于我。我不得不使用fitToCoordinates https://github.com/react-native-community/react-native-maps/blob/master/docs/mapview.md

this.mapRef.fitToCoordinates(coordinates)

其中coordinates是{纬度：数字，经度：数字}对象的数组

通过调用函数get4PointsAroundCircumference将圆转换为坐标数组，该函数传入圆的中心位置，半径以Km为单位

// returns four coordinates around the circle
function get4PointsAroundCircumference(latitude, longitude, radius) {
  const earthRadius = 6378.1 //Km
  const lat0 = latitude + (-radius / earthRadius) * (180 / Math.PI)
  const lat1 = latitude + (radius / earthRadius) * (180 / Math.PI)
  const lng0 = longitude + (-radius / earthRadius) * (180 / Math.PI) / Math.cos(latitude * Math.PI / 180);
  const lng1 = longitude + (radius / earthRadius) * (180 / Math.PI) / Math.cos(latitude * Math.PI / 180);

  return [{
      latitude: lat0,
      longitude: longitude
    }, //bottom
    {
      latitude: latitude,
      longitude: lng0
    }, //left
    {
      latitude: lat1,
      longitude: longitude
    }, //top
    {
      latitude: latitude,
      longitude: lng1
    } //right
  ]
}


const points = get4PointsAroundCircumference(51.509865, -0.118092, 100)

console.log(points);

this.mapRef.fitToCoordinates(points, {
  animated: true
})

使mapview适应圆边界

1 个答案: