PlaceFeature.displayName弃用后，如何用Google Maps JS API创建边界多边形？

核心思路 #

绕开同步style函数无法使用异步fetchPlace()的限制，要么提前通过国家名称获取PlaceId与边界数据、手动绘制高亮多边形；要么尝试使用PlaceFeature的替代属性完成data-driven styling。

方案一：手动绘制高亮多边形（推荐） #

这个方法彻底避开data-driven styling的异步限制，逻辑更稳定：

1. 生成随机国家名称（假设你已有这个逻辑，比如从预设的标准国家列表里随机选取）
2. 通过国家名称获取PlaceId
   用findPlaceFromQuery()接口，传入国家名称即可拿到对应PlaceId，示例代码：

   // 假设随机选中的国家名称为countryName
   const request = {
     query: countryName,
     fields: ['place_id', 'name']
   };
   const service = new google.maps.places.PlacesService(map);
   service.findPlaceFromQuery(request, (results, status) => {
     if (status === google.maps.places.PlacesServiceStatus.OK && results.length > 0) {
       const targetPlaceId = results[0].place_id;
       fetchPlaceAndDrawBoundary(targetPlaceId);
     }
   });
   

3. 获取边界并绘制高亮多边形
   用fetchPlace()拿到国家的几何边界后，创建自定义Polygon覆盖在地图上：

   function fetchPlaceAndDrawBoundary(placeId) {
     const request = {
       placeId: placeId,
       fields: ['geometry']
     };
     const service = new google.maps.places.PlacesService(map);
     service.fetchPlace(request, (place, status) => {
       if (status === google.maps.places.PlacesServiceStatus.OK) {
         // 处理MultiPolygon类型的边界（部分国家由多个区域组成）
         const drawPolygon = (paths) => {
           new google.maps.Polygon({
             paths: paths,
             strokeColor: '#FF0000',
             strokeOpacity: 0.8,
             strokeWeight: 2,
             fillColor: '#FF0000',
             fillOpacity: 0.35,
             map: map
           });
         };
   
         if (place.geometry.type === 'MultiPolygon') {
           place.geometry.coordinates.forEach(polygon => drawPolygon(polygon));
         } else {
           drawPolygon(place.geometry.coordinates);
         }
         // 自动缩放地图到目标国家范围
         map.fitBounds(place.geometry.viewport);
       }
     });
   }
   

方案二：用PlaceFeature替代属性做data-driven styling #

如果坚持使用data-driven styling，可以尝试用feature.getProperty('name')替代已弃用的displayName，但要确保地图语言设置和国家名称的语言匹配（比如地图设为中文时，name会返回中文国家名）。示例代码：

// 设置默认国家样式
map.setStyle({
  featureType: 'administrative.country',
  elementType: 'geometry',
  stylers: [
    { color: '#cccccc' } // 默认灰色
  ]
});

// 单独高亮目标国家
map.setStyle({
  featureType: 'administrative.country',
  elementType: 'geometry',
  stylers: [
    { color: '#ff0000' } // 高亮红色
  ],
  filter: [
    '==', ['get', 'name'], targetCountryName
  ]
});

这个方法的局限性是name字段可能因地图语言、地区差异出现名称变体，稳定性不如方案一。

注意事项 #

• 调用Places API接口前，确保你的API密钥已启用Places API服务。
• 随机国家名称建议使用ISO 3166标准列表，避免查询时出现歧义。

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