https://maps.googleapis.com/maps/api 不支持以代码尝试使用的方式从Web应用程序中运行的前端JavaScript获取请求。

相反，你需要使用受支持的Google Maps JavaScript API，其客户端代码与你尝试的不同。一对距离矩阵服务样本看起来更像是这样的：

<script>
  var service = new google.maps.DistanceMatrixService;
  service.getDistanceMatrix({
    origins: [origin1, origin2],
    destinations: [destinationA, destinationB],
    travelMode: 'DRIVING',
    unitSystem: google.maps.UnitSystem.METRIC,
    avoidHighways: false,
    avoidTolls: false
},…
</script>

<script async defer
  src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>

这是一个通过Places库使用Place Autocomplete API的示例：

<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>

像这样使用Maps JavaScript API（通过script加载库的元素，然后使用google.maps.Map和其他google.maps.*方法）是从运行浏览器的前端JavaScript代码向Google Maps API发出请求的唯一受支持的方法。

Google故意不允许通过其他此类库中的使用axios或AJAX方法发送的请求（也不能直接使用XHR或Fetch API）访问Google Maps API。