Google Maps JavaScript API可在瀏覽器中運行，但不適用於設備上的Cordova應用程序

Question

我有一個Ionic/PhoneGap應用程序，可使用Google地圖google.maps.DistanceMatrixService()服務計算兩個位置之間的距離。

這工作正常，當我在網絡瀏覽器中的應用程序ionic serve，但是當我將它安裝到我的測試設備（三星Galaxy S4 - 5.0）它不起作用，並且我的意思是我沒有得到任何回調（來自被拒絕對象或try catch語句）使得無法調試。

我的代碼

廠包裝類：

.factory('GmapsWrapper', function ($q) { 

    function _GetLatLngObject(lat, lng) { 
     console.log('Gmaps Wrapper - getting new lat lng object...'); 
     try { 
      return new google.maps.LatLng(lat, lng); 
     } catch (err) { 
      console.log('*google.maps.LatLng()* error: ' + err.message); 
      return null; 
     } 
    } 

    function _GetJourneyDistance(startLat, startLng, endLat, endLng) { 
     console.log('Gmaps Wrapper - calculating journey distance...'); 
     var d = $q.defer(); 
     try { 
      var origin = _GetLatLngObject(startLat, startLng); 
      var destination = _GetLatLngObject(endLat, endLng); 

      console.log('origin: ' + angular.toJson(origin)); 
      console.log('destination: ' + angular.toJson(destination)); 

      var service = new google.maps.DistanceMatrixService(); 
      service.getDistanceMatrix({ 
       origins: [origin], 
       destinations: [destination], 
       travelMode: google.maps.TravelMode.DRIVING 
      }, function (response, status) { 
       console.log('*service.getDistanceMatrix* callback: response = ' + angular.toJson(response) + ', status = ' + status); 
       d.resolve(response, status); 
      }); 
     } catch (err) { 
      console.log('*google maps service.getDistanceMatrix()* error: ' + err.message); 
      d.reject(err); 
     } 
     return d.promise; 
    } 

    return { 
     GetJourneyDistance: _GetJourneyDistance, 
     GetLatLngObject: _GetLatLngObject 
    } 
}); 

控制器功能調用GetJourneyDistance方法：

function Calc() { 
     GmapsWrapper.GetJourneyDistance(52.8425701, -1.3493778, 52.8460761, -1.3363366).then(function (data, status) { 
      PopupWrapper.ShowAlert('Calculte Distance', 'Success.'); 
      if (data.rows && data.rows.length > 0) { 
       var distance = data.rows[0].elements[0].distance; 
       PopupWrapper.ShowAlert('Distance', 'Km = ' + EbiLibrary.ConvertMetersToKm(distance.value) + '<br />Miles = ' 
        + EbiLibrary.ConvertMetersToMiles(distance.value)); 
      } 
     }, function (err) { 
      PopupWrapper.ShowAlert('Calculate Distance', 'Error: ' + angular.toJson(err)); 
     }); 
    } 

index.html的腳本參考：

<script src="https://maps.googleapis.com/maps/api/js?key=[MY KEY]&sensor=true"></script> 

config.xml文件白名單：

<access origin="https://maps.googleapis.com/maps/api/*" /> 

附加信息

我知道谷歌地圖腳本在我index.html文件正確添加，因爲當我console.log它顯示他們作爲一個出發地和目的地的變量lat lng對象，它使用new google.maps.LatLng(lat, lng)方法創建。

Answer 1

感謝@Joerg指引我朝着正確的方向前進。我使用的開發工具使用ionic serve時檢查正在做出什麼樣的要求，發現三個請求作了：

• 他們兩個開始https://maps.googleapis.com/maps
• 而另一種是https://maps.googleapis.com/maps-api-v3（其中不匹配我的白名單規則）

所以我已將我的白名單更改爲<access origin="https://maps.googleapis.com/*" />，現在似乎已經解決了這個問題。