如何在Google Maps中仅显示单个国家，隐藏其他区域？

以下是几种可行的解决方案，适用于Google Maps JavaScript API场景：

方法一：通过地图样式过滤+国家属性匹配 #

这是最常用的方案，通过自定义地图样式隐藏所有国家，再单独显示目标国家：

1. 确定目标国家的ISO代码（比如中国是CN，美国是US），用于后续的样式过滤。
2. 初始化地图并应用样式规则：

   // 初始化地图
   const map = new google.maps.Map(document.getElementById("map"), {
     center: { lat: 39.9042, lng: 116.4074 }, // 目标国家的中心坐标
     zoom: 5,
     styles: [
       // 默认隐藏所有国家的几何图形
       {
         featureType: "administrative.country",
         elementType: "geometry",
         stylers: [{ visibility: "off" }]
       },
       // 单独显示目标国家的几何图形并设置颜色
       {
         featureType: "administrative.country",
         elementType: "geometry",
         stylers: [
           { visibility: "on" },
           { color: "#f0f0f0" } // 自定义目标国家的填充色
         ],
         filter: ["eq", "administrative.country", "CN"] // 替换为目标国家的ISO代码
       },
       // 可选：隐藏所有国家标签，仅显示目标国家的标签
       {
         featureType: "administrative.country",
         elementType: "labels",
         stylers: [{ visibility: "off" }]
       },
       {
         featureType: "administrative.country",
         elementType: "labels",
         stylers: [{ visibility: "on" }],
         filter: ["eq", "administrative.country", "CN"]
       }
     ]
   });
   

3. 添加目标地点标记：

   // 示例：添加多个地点标记
   const locations = [
     { lat: 39.9042, lng: 116.4074, title: "北京" },
     { lat: 31.2304, lng: 121.4737, title: "上海" }
   ];
   
   locations.forEach(location => {
     new google.maps.Marker({
       position: location,
       map: map,
       title: location.title
     });
   });
   

方法二：结合地理围栏限制地图拖动范围 #

如果需要防止用户拖动到目标国家以外的区域，可以配合restriction参数实现：

const map = new google.maps.Map(document.getElementById("map"), {
  center: { lat: 39.9042, lng: 116.4074 },
  zoom: 5,
  // 设置目标国家的大致边界范围
  restriction: {
    latLngBounds: {
      north: 53.55,
      south: 18.1,
      east: 135.0,
      west: 73.5
    },
    strictBounds: true // 严格限制地图不能超出该范围
  },
  // 同时应用方法一中的样式规则隐藏其他国家
  styles: [/* 此处省略样式代码 */]
});

方法三：自定义地图瓦片（进阶方案） #

如果API的样式过滤不够精准，可自行生成仅包含目标国家的地图瓦片，再通过Google Maps API加载：

• 使用地理数据工具（如Natural Earth）获取目标国家的边界数据
• 通过TileMill、Mapbox Studio等工具生成自定义瓦片
• 在Google Maps中通过google.maps.ImageMapType加载自定义瓦片层

注意事项 #

• 确保使用的国家ISO代码准确，部分地区可能需要调整过滤规则
• 需申请有效的Google Maps API密钥，并启用Maps JavaScript API服务
• 边界范围参数需要根据目标国家的实际地理范围调整，可通过Google Maps手动获取大致坐标

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