CORS請求不適用於谷歌方向API

每當我嘗試從指示API獲取數據時，我都會在請求的資源上找不到'Access-Control-Allow-Origin'標頭。我試圖對geocode API執行相同的請求，並且它可以正常工作。這是我正在使用的代碼：CORS請求不適用於谷歌方向API

var xhr = new XMLHttpRequest(); 
    xhr.open('GET', 'https://maps.googleapis.com/maps/api/directions/json?origin='+encodeURIComponent(data.origin)+'&destination='+encodeURIComponent(data.destination)+'&key='+encodeURIComponent(data.key), true); 
    xhr.send();

來源

2017-02-03 Razvan

這顯然不從JavaScript支持跨域XHR /抓取請求http://stackoverflow.com/questions/29834185/how-do-i-get -json從 - 谷歌-方向-API的使用-jquery的 – sideshowbarker

由於api不支持CORS，所以無法訪問ajax請求的指示api。但是，您可以使用該庫訪問方向API數據。

這裏從Google Maps API Examples採取一個例子：

<style> 
    /* Always set the map height explicitly to define the size of the div 
    * element that contains the map. */ 
    #map { 
     height: 100%; 
    } 
    /* Optional: Makes the sample page fill the window. */ 
    html, body { 
     height: 100%; 
     margin: 0; 
     padding: 0; 
    } 
</style> 
<div id="map" style="position: relative; overflow: hidden;"> 
    <div style="height: 100%; width: 100%; position: absolute; top: 0px; left: 0px; background-color: rgb(229, 227, 223);"></div> 
</div> 
<script> 
    function initMap() { 
     var directionsService = new google.maps.DirectionsService; 
     // Optionally create a map 
     var directionsDisplay = new google.maps.DirectionsRenderer; 
     var map = new google.maps.Map(document.getElementById('map'), { 
      zoom: 7, 
      center: {lat: 41.85, lng: -87.65} 
     }); 
     directionsDisplay.setMap(map); 

     directionsService.route({ 
       origin: 'oklahoma city, ok', 
       destination: 'chicago, il', 
       travelMode: 'DRIVING' 
     }, function(response, status) { 
      if (status === 'OK') { 
       // Pass data to the map 
       directionsDisplay.setDirections(response); 

       // See the data in the console 
       console.log(response); 
      } else { 
       window.alert('Directions request failed due to ' + status); 
      } 
     }); 
    } 
</script> 
<script async="" defer="" src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"></script>

來源

2017-02-03 15:02:12

CORS請求不適用於谷歌方向API

回答

相關問題