代码之家 › 专栏 › 技术社区 › 1110

是否可以根据指定的坐标和屏幕大小计算区域

react-native-maps latitude-longitude react-native google-maps ios

1110 · 技术社区 · 6 年前

我有一个坐标,我想为它设置地图区域。
问题是,当我传递坐标为它创建一个区域到一个坐标在区域中心的函数时。
我不想让它在中间,我需要一点。
例如,如果地图的高度是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
  };
}

这可以计算吗?

2 回复 | 直到 6 年前

tadija 6 年前

我有一个解决这个问题的方法,但它是用mapkit(苹果地图)完成的,所以不确定这是否真的对你有帮助,但它可能会给你一些想法也许…

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

希望对你有帮助!

bennygenel 6 年前

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

有了这些信息,你所需要做的只是一个小小的计算。首先将标记坐标设置为拥有的坐标,然后可以添加或减去 拉蒂图德尔塔 从你的三角洲并将区域设置到那个位置。

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

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>
    );
  }
}