Google Maps JavaScript API 适用于浏览器，但不适用于设备上的 Cordova 应用程序答案

【问题标题】：Google Maps JavaScript API works in browser but not in Cordova app on a deviceGoogle Maps JavaScript API 适用于浏览器，但不适用于设备上的 Cordova 应用程序
【发布时间】：2015-12-14 12:17:27
【问题描述】：

我有一个 Ionic / PhoneGap 应用程序，它使用 Google 地图 google.maps.DistanceMatrixService() 服务计算两个位置之间的距离。

当我在网络浏览器中ionic serve 应用程序时，这工作正常，但是当我将它安装到我的测试设备（Samsung 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/*" />

其他信息

我知道 Google 地图脚本已正确添加到我的 index.html 文件中，因为当我 console.log 源变量和目标变量时，它会将它们显示为使用 new google.maps.LatLng(lat, lng) 方法创建的 lat lng 对象。

【问题讨论】：

您是否将 Google 网址列入白名单？
是的，在我的config.xml 中，我有<access origin="https://maps.googleapis.com/maps/api/*" />，当我仔细检查它时，我看到相关脚本已添加到 head 标签中。如果白名单不正确，这些脚本会出现吗？

标签： javascript cordova google-maps-api-3 ionic-framework

【解决方案1】：

感谢@Joerg 为我指明了正确的方向。我使用开发者工具检查使用ionic serve 时发出了哪些请求，并注意到发出了三个请求：

其中两个以https://maps.googleapis.com/maps开头
另一个是https://maps.googleapis.com/maps-api-v3（不符合我的白名单规则）

所以我已将我的白名单更改为<access origin="https://maps.googleapis.com/*" />，目前看来已经解决了。

【讨论】：