这个问题在这里已有答案:
我正在尝试使用Google Maps API计算两个地方之间的预计行程时间。我以下列方式询问数据:
const Url = 'https://maps.googleapis.com/maps/api/distancematrix/json?origins=25.7694708,-80.259947&destinations=25.768915,-80.254659&key=' + API_KEY;
try {
const response = await fetch(Url);
console.log(response);
const data = await response.json();
console.log(data.rows);
} catch(e){
console.log(e);
}
问题是在浏览器控制台中我收到错误:
TypeError: NetworkError when attempting to fetch resource
它还向我显示了一个警告:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://maps.googleapis.com/maps/api/distancematrix/json?origins=25.7694708,-80.259947&destinations=25.768915,-80.254659&key=API_KEY. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).
但是,当我在网络部分查看控制台时,它向我显示呼叫已成功完成,它向我显示以下json:
{
"destination_addresses" : [ "3670 SW 3rd St, Miami, FL 33135, USA" ],
"origin_addresses" : [ "3911 SW 2nd Terrace, Coral Gables, FL 33134, USA" ],
"rows" : [
{
"elements" : [
{
"distance" : {
"text" : "0.9 km",
"value" : 881
},
"duration" : {
"text" : "2 mins",
"value" : 144
},
"status" : "OK"
}
]
}
],
"status" : "OK"
}
有人可以帮我解决这个问题吗?我在网站上尝试过类似的问题,但我无法解决问题。提前致谢。
您正在客户端使用距离矩阵服务。但是,客户端(浏览器) - site不支持您尝试访问API的方式,它将无法可靠地运行。
很好,有一个库用于您的用例:这是客户端Distance Matrix Service的指南。这是一个vanilla-js example检查出来。
也许这个片段会帮助你:
const matrix = new google.maps.DistanceMatrixService();
matrix.getDistanceMatrix({
origins: [new google.maps.LatLng(25.7694708, -80.259947)],
destinations: [new google.maps.LatLng(25.768915, -80.254659)],
travelMode: google.maps.TravelMode.DRIVING,
},
function(response, status) { //do something }
);