Google Maps加拿大区域边界无法生成问题求助

我们使用Google Maps的Boundary Style Polygon API为加拿大设置区域边界时，边界无法生成，但相同代码在其他国家均可正常运行。以下是实现地图标记与边界的相关代码，请求协助解决：

代码文件展示 #

Index.js 文件内容 #

//Index.js File 

let map;
var marker;
let featureLayer;
const lat = lats[0];
const lng =lngs[0];
console.log(lats[0] , lngs[0],place_id,city);
console.log(typeof lng,typeof lat,typeof place_id ,typeof city);
async function initMap() {
    const { Map } = await google.maps.importLibrary("maps");
    map = new Map(document.getElementById("map"), {
        center: {          
            // // Atlanta Usa
            // lat: 33.748783,
            // lng: -84.388168,

            lat: lat,
            lng: lng,
        },

        zoom:12,
        mapId: "8f7f6d57a786f81a",
    });

    featureLayer = map.getFeatureLayer("LOCALITY");
    const featureStyleOptions = {
        strokeColor: "#810FCB",
        strokeOpacity: 1.0,
        strokeWeight: 3.0,
        fillColor: "#810FCB",
        fillOpacity: 0.5,
    };
    featureLayer.style = (options) => {
            // Atlanta USA
        //if (options.feature.placeId == 'ChIJjQmTaV0E9YgRC2MLmS_e_mY') {
        //    return featureStyleOptions;
       // }

        // Stettler Canada 
        if (options.feature.placeId == place_id) {
           return featureStyleOptions;
        }
           
    };
   

        var point = new google.maps.LatLng(
            parseFloat(lat),
            parseFloat(lng));
        var marker = new google.maps.Marker({
            position: {
                lat: lat,
                lng: lng
            },
            map: map,
            title: 'Old Highway 80 Overpass',
            animation: google.maps.Animation.DROP
        });
        marker.addListener('click', function() {
            infowindow.open(map, marker);
        });
    }

initMap();

Index.blade.php 文件内容 #

//Index.blade.php File

@php
    $app_url = config('app.url');
    $google_map_key = config('services.google.google_map_api_key');
    $map_details = get_lat_long($areas->city);
    $place_id = $map_details['place_id'];
    if (Auth::user()->role_id != null) {
        foreach ($areas as $key => $area) {
            $area_id = Auth::user()->role_id == null ? $area : $area->region_id;
            $area = App\Models\Region::where('id', $area_id)->first();
            $area_ids[] = $area->id;
            $lat[] = floatval($area->latitude);
            $lng[] = floatval($area->longitude);
        }
    } else {
        $area_ids[] = $areas->id;
        $lat[] = floatval($areas->latitude);
        $lng[] = floatval($areas->longitude);
    }
@endphp




<div class="row mt-5">
    <div class="col-sm-12">
        <div id="map" class="responsive-map-container"></div>
    </div>
</div>

<script>
    let area_ids = {!! json_encode($area_ids) !!};
    let lats = {!! json_encode($lat) !!};
    let lngs = {!! json_encode($lng) !!};
    let place_id = {!! json_encode($place_id) !!}
    let city = {!! json_encode($areas->city) !!}
    
</script>

<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<script>
    let gkey = {!! json_encode($google_map_key) !!};
    (g => {
        var h, a, k, p = "The Google Maps JavaScript API",
            c = "google",
            l = "importLibrary",
            q = "__ib__",
            m = document,
            b = window;
        b = b[c] || (b[c] = {});
        var d = b.maps || (b.maps = {}),
            r = new Set,
            e = new URLSearchParams,
            u = () => h || (h = new Promise(async (f, n) => {
                await (a = m.createElement("script"));
                e.set("libraries", [...r] + "");
                for (k in g) e.set(k.replace(/[A-Z]/g, t => "_" + t[0].toLowerCase()), g[k]);
                e.set("callback", c + ".maps." + q);
                a.src = `https://maps.${c}apis.com/maps/api/js?` + e;
                d[q] = f;
                a.onerror = () => h = n(Error(p + " could not load."));
                a.nonce = m.querySelector("script[nonce]")?.nonce || "";
                m.head.append(a)
            }));
        d[l] ? console.warn(p + " only loads once. Ignoring:", g) : d[l] = (f, ...n) => r.add(f) && u().then(() =>
            d[l](f, ...n))
    })
    ({
        key: gkey,
        v: "weekly"
    });
</script>
<script src="{{ asset('assets/js/map/map_index.js') }}"></script>

可能的问题原因及解决方案 #

1. Feature Layer层级不匹配 #

加拿大的行政区划层级定义可能和其他国家不同，当前使用的LOCALITY层级可能没有对应的数据。尝试切换为更贴合加拿大区域的层级，比如ADMINISTRATIVE_AREA_LEVEL_3或ADMINISTRATIVE_AREA_LEVEL_4：

featureLayer = map.getFeatureLayer("ADMINISTRATIVE_AREA_LEVEL_3");

2. Place ID有效性验证 #

确认获取的加拿大区域place_id是否正确关联到目标层级的行政区划。可以通过Google Maps官方的Place ID验证工具检查该ID的归属区域，以及该区域是否在Boundary API的覆盖范围内。

3. 地图缩放级别调整 #

部分边界数据仅在特定缩放级别以上才会加载，当前设置的zoom:12可能不足以触发边界渲染。尝试调高缩放级别到13或14：

zoom:14,

4. API权限与数据覆盖检查 #

登录Google Cloud控制台，确认你的API密钥已启用Boundary Styles功能，同时检查该功能对加拿大区域的数据覆盖情况，确保目标区域在可用范围内。

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