是否可以根据指定的坐标和屏幕尺寸计算区域答案

【问题标题】：Is it possible to calculate region based on specified coordinate and screen size是否可以根据指定的坐标和屏幕尺寸计算区域
【发布时间】：2018-12-25 14:57:23
【问题描述】：

我有一个坐标，我想为其设置地图区域。
问题是，当我将坐标为其创建区域传递给坐标位于区域中心的函数时。
我不希望它在中心，我需要它。
例如，如果地图高度为 500，我想设置区域，以便坐标位于顶部 250 的中心。

function getRegionForCoordinates(points) {
  // points should be an array of { latitude: X, longitude: Y }
  let minX, maxX, minY, maxY;

  // init first point
  ((point) => {
    minX = point.latitude;
    maxX = point.latitude;
    minY = point.longitude;
    maxY = point.longitude;
  })(points[0]);

  // calculate rect
  points.map((point) => {
    minX = Math.min(minX, point.latitude);
    maxX = Math.max(maxX, point.latitude);
    minY = Math.min(minY, point.longitude);
    maxY = Math.max(maxY, point.longitude);
  });

  const midX = (minX + maxX) / 2;
  const midY = (minY + maxY) / 2;
  let deltaX = (maxX - minX);
  let deltaY = (maxY - minY);

  return {
    latitude: midX,
    longitude: midY,
    latitudeDelta: 0.002,
    longitudeDelta: 0.002
  };
}

这可以计算吗？

【问题讨论】：

标签： ios google-maps react-native latitude-longitude react-native-maps

【解决方案1】：

我有这个问题的解决方案，但它是通过 MapKit（Apple 地图）完成的，所以不确定这是否真的对你有帮助，但它可能会给你一些想法......

MapKit 有这个MKCoordinateRegion 类型：

var region: MKCoordinateRegion {
    let regionSize = 10000.0
    let region = MKCoordinateRegionMakeWithDistance(coordinate, regionSize, regionSize)
    return region
}

并且可以使用该功能将地图缩放到区域：

map.setRegion(region, animated: animated)

我在底部也有一些视图，想在屏幕上部居中注释，所以在设置地图区域之前我必须做一些计算：

let offset = CGPoint(x: 0, y: bottomViewHeight / 2)
let screenHeight = UIDevice.current.orientation == .portrait ? view.bounds.height : view.bounds.width
let offsetScreenPercentage = Double(offset.y / screenHeight)
region.center.latitude -= region.span.latitudeDelta * offsetScreenPercentage * 2

希望对你有帮助！

【讨论】：

【解决方案2】：

longitudeDelta 和latitudeDelta 是地图两侧以及顶部和底部之间的差异。这些值可用于计算给定区域中地图中的不同位置。要了解有关这些值的更多信息，您可以阅读这篇文章 (MKMapView and Zoom Levels: A Visual Guide)

有了这些信息，您只需做一个小计算。首先，您将标记坐标设置为您拥有的坐标，然后您可以从增量中添加或减去 latitudeDelta 的一部分并将区域设置为该位置。

下面是更好地描述它的示例代码；

export default class App extends Component {
  state = {
    region: null,
    marker: null,
  };
  setMarkerAndRegion = () => {
    const initialReagion = {
      latitude: 37.78825,
      longitude: -122.4324,
      latitudeDelta: 0.0922,
      longitudeDelta: 0.0421,
    };

    // Set marker to the region's LatLong
    const marker = {
      latitude: initialReagion.latitude,
      longitude: initialReagion.longitude,
    };

    // Subtract the required amount from the latitude
    const region = {
      latitude: initialReagion.latitude - initialReagion.latitudeDelta / 4,
      longitude: initialReagion.longitude,
      latitudeDelta: initialReagion.latitudeDelta,
      longitudeDelta: initialReagion.longitudeDelta,
    };

    this.setState({ region, marker });
  };
  componentDidMount() {
    this.setMarkerAndRegion();
  }
  render() {
    const { region, marker } = this.state;
    return (
      <View style={styles.container}>
        {region && (
          <MapView style={{ flex: 1 }} initialRegion={region}>
            {marker && <Marker coordinate={marker} />}
          </MapView>
        )}
      </View>
    );
  }
}

【讨论】：