Xamarin.Forms.Maps如何获取屏幕中心经纬度坐标及地图缩放级别？

不管用哪种地图SDK，核心逻辑都是监听地图的移动/缩放结束事件，在事件回调里获取当前地图的中心经纬度和缩放级别，再用这些参数请求对应范围的标记数据。以下是主流地图平台的具体实现：

Web端场景 #

1. Google Maps JavaScript API #

监听idle事件（地图移动/缩放结束后触发），通过map.getCenter()获取中心坐标，map.getZoom()获取缩放级别：

// 初始化地图
const map = new google.maps.Map(document.getElementById("map"), {
  center: { lat: -34.397, lng: 150.644 },
  zoom: 8,
});

// 监听地图移动/缩放完成
map.addListener("idle", () => {
  const center = map.getCenter();
  const zoomLevel = map.getZoom();
  // 这里拿到中心经纬度和缩放级别，请求标记数据
  console.log("中心坐标：", center.lat(), center.lng());
  console.log("缩放级别：", zoomLevel);
  // loadMarkers(center.lat(), center.lng(), zoomLevel);
});

2. Mapbox GL JS #

监听moveend事件，通过map.getCenter()和map.getZoom()获取数据：

// 初始化地图
const map = new mapboxgl.Map({
  container: "map",
  style: "mapbox://styles/mapbox/streets-v12",
  center: [-74.5, 40],
  zoom: 9,
});

// 监听地图移动结束
map.on("moveend", () => {
  const center = map.getCenter();
  const zoomLevel = map.getZoom();
  console.log("中心坐标：", center.lat, center.lng);
  console.log("缩放级别：", zoomLevel);
  // 调用加载标记的方法
});

移动端场景 #

1. Android（Google Maps Android API） #

给GoogleMap设置OnCameraIdleListener，在回调里获取相机位置的中心坐标和缩放级别：

// 初始化地图后设置监听
map.setOnCameraIdleListener {
    val cameraPosition = map.cameraPosition
    val centerLat = cameraPosition.target.latitude
    val centerLng = cameraPosition.target.longitude
    val zoomLevel = cameraPosition.zoom
    // 这里请求标记数据
}

2. iOS（MapKit） #

给MKMapView设置MKMapViewDelegate，实现mapView(_:regionDidChangeAnimated:)方法：

class MapViewController: UIViewController, MKMapViewDelegate {
    @IBOutlet weak var mapView: MKMapView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        mapView.delegate = self
    }
    
    func mapView(_ mapView: MKMapView, regionDidChangeAnimated animated: Bool) {
        // 获取中心坐标
        let centerCoordinate = mapView.centerCoordinate
        let centerLat = centerCoordinate.latitude
        let centerLng = centerCoordinate.longitude
        // 获取缩放级别（MapKit用region的跨度表示，也可以转成类似谷歌的缩放级别）
        let zoomLevel = log2(360 / mapView.region.span.longitudeDelta)
        // 请求标记数据
    }
}

国内地图平台示例（以百度地图Web端为例） #

监听moveend事件，通过map.getCenter()和map.getZoom()获取数据：

// 初始化百度地图
const map = new BMapGL.Map("container");
map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 11);

// 监听地图移动结束
map.addEventListener("moveend", () => {
    const center = map.getCenter();
    const zoomLevel = map.getZoom();
    console.log("中心坐标：", center.lat, center.lng);
    console.log("缩放级别：", zoomLevel);
    // 加载标记
});

关键注意点 #

• 不要监听move或cameraMove这类实时事件，会频繁触发请求导致性能问题，建议用移动/缩放结束后的事件（比如idle、moveend）。
• 缩放级别和覆盖范围的对应关系：不同地图平台的缩放级别定义略有差异，一般缩放级别越高（数值越大），地图越详细，覆盖范围越小；缩放级别越低，覆盖范围越大，需要加载更多标记。

内容的提问来源于stack exchange，提问作者Jimmy