Google Maps特定建筑物样式定制：loadStyle方法未定义求助

问题背景 #

已通过Google Map Platform样式编辑器完成基础地图样式配置（隐藏默认地点图标、设置建筑物扁平化显示），现需要针对特定place_id的建筑物修改样式（例如更改颜色），且已通过地理编码获取到目标建筑物的place_id。但尝试Google Bard提供的代码时，发现map.loadStyle方法未定义，无法实现需求。

错误原因 #

Google Maps JavaScript API目前不存在公开的map.loadStyle()方法，也不支持通过CSS选择器（如path[id='my-building-id']）直接定位并修改单个建筑物的样式。Bard给出的代码属于未实现的功能或错误信息。

可行解决方案 #

方案1：通过Data Layer绘制自定义覆盖物 #

利用Places API获取目标建筑物的边界数据，在Data Layer上绘制自定义多边形覆盖原建筑物，实现样式修改：

1. 确保在Google Cloud控制台启用Places API
2. 修改代码实现逻辑：

const { Map, Marker, Geocoder, PlacesService } = await google.maps.importLibrary("maps");
const { PlaceDetailsRequest } = await google.maps.importLibrary("places");

let currentPosition = {lat:50.63584018637185, lng:3.070463549079457}
let map;

async function initMap() {
  map = new Map(document.getElementById('map'), {
    zoom: 20,
    center: currentPosition,
    mapId: '<MY_MAP_ID>',
  });

  const marker = new google.maps.Marker({
    position: currentPosition,
    map: map,
  });

  const geocoder = new google.maps.Geocoder();
  geocoder.geocode({ location: currentPosition }, async (results, status) => {
    if (status === google.maps.GeocoderStatus.OK) {
      const buildingId = results[0].place_id;
      // 获取建筑物边界几何数据
      const service = new PlacesService(map);
      const request = {
        placeId: buildingId,
        fields: ["geometry"]
      };

      service.getDetails(request, (place, status) => {
        if (status === google.maps.places.PlacesServiceStatus.OK) {
          // 添加自定义多边形覆盖物
          map.data.addGeoJson({
            type: "Feature",
            geometry: place.geometry
          });
          // 设置自定义样式
          map.data.setStyle({
            fillColor: "#FF0000",
            fillOpacity: 0.7,
            strokeColor: "#FF0000",
            strokeWeight: 1
          });
        }
      });
    } else {
      console.error('Geocode failed: ', status);
    }
  });
}

方案2：类别级样式筛选（仅支持批量修改） #

若无需针对单个place_id，而是修改某类建筑物（如学校、商业建筑）的样式，可通过Styled Maps实现：

map = new Map(document.getElementById('map'), {
  zoom: 20,
  center: currentPosition,
  mapId: '<MY_MAP_ID>',
  styles: [
    {
      featureType: "administrative.land_parcel",
      elementType: "geometry",
      stylers: [{ color: "#FF0000" }]
    }
  ]
});

注意：此方法无法精准定位单个place_id的建筑物。

关键说明 #

• Google Maps JavaScript API目前不支持直接修改原生建筑物图层中单个元素的样式，仅能通过覆盖物方式实现视觉上的自定义效果。
• 使用Places API获取建筑物边界时，需确保API密钥具备对应权限，并注意请求配额限制。

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