加载 GeoJson Google API - CORS 策略答案

【问题标题】：Loading GeoJson Google API - CORS policy加载 GeoJson Google API - CORS 策略
【发布时间】：2019-12-27 10:36:56
【问题描述】：

我正在尝试使用 Google 地图 API 加载一些 JSON。

https://developers.google.com/maps/documentation/javascript/datalayer

这是我的小提琴代码：

https://jsfiddle.net/simonrenauld/3z7peqdv/6/

<script src="https://storage.cloud.google.com/jsontestdemp/testdata.jsonp"></script>

我尝试像文档中那样加载为 geojsonp

我仍然无法加载到我的地图中。避免 CORS 政策的简单解决方案是什么？

【问题讨论】：

从同一个域或您可以控制的域加载 GeoJSON（以设置 CORS 标头）

标签： javascript google-maps google-api

【解决方案1】：

根据谷歌的documentation：

注意：为了从另一个域加载 json 文件，该域必须启用Cross-origin resource sharing。

否则，从同一个域加载它。例如。查看这个工作的codesandbox，它从与index.html 位于同一根级别的文件(myjson.json) 中加载Google 的GeoJSON 样本。

var map;
function initMap() {
    map = new google.maps.Map(document.getElementById("map"), {
        zoom: 4,
        center: { lat: -28, lng: 137 }
    });

    map.data.loadGeoJson("myjson.json");
}

希望这会有所帮助！

【讨论】：