我正在尝试让 Angular 与 Google Maps Places Autocomplete API 对话。问题是服务器不允许 CORS 调用(它不返回 Access-Control-Allow-Origin header )并且 JSONP 调用似乎也是徒劳的，因为它返回纯 JSON 而不是JSONP，导致语法错误。
这是我目前正在尝试的服务功能(_jsonp 是一个 Jsonp 对象):
return this._jsonp.request(url, { method: 'GET' });
这行不通。响应到达，但 Angular 崩溃了，因为它不是 JSONP 而是 JSON。
这太疯狂了。如果 CORS 被禁用并且 JSONP 调用不起作用，我究竟该如何访问它？
https://maps.googleapis.com/maps/api/place/autocomplete/json?key=ACCESS_KEY&types=(cities)&input=ber
有没有办法在 Observable 管道中将 JSON 服务器响应转换为 JSONP 数据对象？
从网络应用程序调用地点自动完成 API 的受支持方式是 using the Places library :
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -33.8688, lng: 151.2195},
zoom: 13
});
...
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(card);
var autocomplete = new google.maps.places.Autocomplete(input);
autocomplete.bindTo('bounds', map);
var infowindow = new google.maps.InfoWindow();
var infowindowContent = document.getElementById('infowindow-content');
infowindow.setContent(infowindowContent);
var marker = new google.maps.Marker({
map: map,
anchorPoint: new google.maps.Point(0, -29)
});
</script>
<script
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initMap"
async defer></script>
这样，即使响应缺少 Access-Control-Allow-Origin header 也没有关系。
以这种方式使用 Maps JavaScript API——通过 script 元素加载库，然后使用 google.maps.Map 和其他 google.maps.* 方法——是唯一受支持的方法。 Google 有意不允许通过使用 XHR 或 Fetch API 发送的请求来执行此操作。