地图不同区域最大缩放级别有差异，如何按坐标限制缩放消除404错误？

完全可以通过当前坐标限制最大缩放级别来解决这个问题，核心思路是根据地图当前中心点的坐标，动态调整允许的最大缩放等级，避免请求不存在的海洋区域瓦片：

• 第一步：监听地图的zoom_changed或center_changed事件，每次地图缩放或移动时触发判断逻辑
• 第二步：通过地图API获取当前中心点的经纬度坐标
• 第三步：通过地理编码接口、瓦片可用性检测，或提前维护的陆地/海洋区域数据，判断当前位置是陆地还是海洋
• 第四步：根据判断结果动态设置地图的maxZoom属性：
  • 陆地区域设置为20级
  • 海洋区域根据位置设置为7-12级

以下是基于谷歌地图JS API的简单代码示例：

// 初始化地图
const map = new google.maps.Map(document.getElementById('map'), {
  zoom: 10,
  center: {lat: -34.397, lng: 150.644},
  maxZoom: 20 // 默认陆地最大缩放
});

// 监听地图移动/缩放事件
map.addListener('center_changed', adjustMaxZoom);
map.addListener('zoom_changed', adjustMaxZoom);

function adjustMaxZoom() {
  const center = map.getCenter();
  // 替换为实际的陆地/海洋判断逻辑
  const isLand = checkIfLand(center.lat(), center.lng());
  
  if (isLand) {
    map.setOptions({maxZoom: 20});
  } else {
    // 根据海洋区域位置获取对应的最大允许缩放级（7-12）
    const oceanMaxZoom = getOceanMaxZoom(center.lat(), center.lng());
    map.setOptions({maxZoom: oceanMaxZoom});
  }
}

// 模拟陆地检测函数（实际需替换为真实逻辑）
function checkIfLand(lat, lng) {
  // 示例：根据经纬度范围判断或调用API
  return true;
}

// 模拟获取海洋区域最大缩放级函数
function getOceanMaxZoom(lat, lng) {
  // 根据不同海域返回7-12之间的数值
  return 10;
}

这样调整后，当用户在海洋区域尝试缩放超过允许等级时，地图会自动限制到对应级别的最大值，不会触发不存在的瓦片请求，也就不会出现控制台404错误。

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