Google Maps Javascript API V3 在移动/本机应用程序上找不到 404

Posted 2023-03-07

【中文标题】Google Maps Javascript API V3 在移动/本机应用程序上找不到 404

【英文标题】：Google Maps Javascript API V3 getting 404 not found on mobile/native App

【发布时间】：2015-12-14 16:57:39

【问题描述】：

我可以毫无问题地让 Google 地图显示在浏览器中。当我用 phonegap build 打包我的应用程序时，它不起作用。在我的远程调试会话中，它说

https://maps.googleapis.com/maps/api/js?key=My_Key_Goes_Here 
Failed to load resource: the server responded with a status of 404 (Not Found)

在文档的开头我有：

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=MyKey"></script>
<script src="js/locations.js" type="text/javascript"></script>

在我得到的网络控制台中：

Request URL:http://maps.googleapis.com/maps/api/js?key=MyKeyHere
Request Method:GET
Status Code:404 Not Found (from cache)
Response Headers
Client-Via:shouldInterceptRequest
Request Headers
Provisional headers are shown
Accept:*/*
User-Agent:Mozilla/5.0 (Linux; android 5.0.2; SM-T530NU Build/LRX22G; wv) AppleWebKit/537.36 (Khtml, like Gecko) Version/4.0 Chrome/46.0.2490.76 Safari/537.36
Query String Parameters
view source
view URL encoded
key: MyKeyDisplayedHere

在我的 config.xml 文件中，我包含了以下几行：

<preference name="orientation" value="portrait" />
<preference name="Fullscreen" value="true" />
<access origin="*://*.googleapis.com/*" subdomains="true" />
<access origin="*://*.gstatic.com/*" subdomains="true" />
<access origin="*://*.google.com/*" subdomains="true" />
<access origin="*://*.googleusercontent.com/*" subdomains="true" />

我正在使用 jQuery Mobile，但不是在第一页而是在另一页上显示地图。无论如何，它在尝试从 API 获取时会给出 404，但这是 locations.js 文件中的 JS 代码：

$(document).on('pageshow', "#map-page", function() 
    var defaultLatLng = new google.maps.LatLng(34.0983425, -118.3267434);  // Default to Hollywood, CA when no geolocation support
    if ( navigator.geolocation ) 
        function success(pos) 
            // Location found, show map with these coordinates
            drawMap(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude));
        
        function fail(error) 
            drawMap(defaultLatLng);  // Failed to find location, show default map
        
        // Find the users current position.  Cache the location for 5 minutes, timeout after 6 seconds
        navigator.geolocation.getCurrentPosition(success, fail, maximumAge: 500000, enableHighAccuracy:true, timeout: 6000);
     else 
        drawMap(defaultLatLng);  // No geolocation support, show default map
    
    function drawMap(latlng) 
        var myOptions = 
            zoom: 10,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        ;
        var map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
        console.log('hey');
        // Add an overlay to the map of current lat/lng
        var marker = new google.maps.Marker(
            position: latlng,
            map: map,
            title: "Greetings!"
        );
    
);

我也尝试将 API 的 href 更改为“http”而不是“https”

【参考方案1】：

经过一番挖掘，我找到了一些文档here:

显然你必须添加白名单插件而不是原生插件，所以我将我的 config.xml 文件更改为：

 <access origin="http://*.phonegap.com" subdomains="true" />
        <access origin="*://*.googleapis.com/*" subdomains="true" />
        <access origin="*://*.gstatic.com/*" subdomains="true" />
        <access origin="*://*.google.com/*" subdomains="true" />
        <access origin="*://*.googleusercontent.com/*" subdomains="true" />

        <plugin name="cordova-plugin-whitelist" />

它现在可以在移动应用程序中使用，我也可以使用我列入白名单的外部资源。

【讨论】：

您的修复可能有效，因为您的所有 Javascript 都在一个文件中。如果您从网页本身加载任何代码，则它被视为 *inline* Javascript。在这种情况下，您需要在网页中应用CSP。有关更多详细信息，请阅读此工作表：HOW TO apply the Cordova/Phonegap the whitelist system

另外，如果您使用的是 Phonegap Build，您应该使用版本号或spec="vers"，否则您可能会遇到构建问题。这是最佳做法。

如帖子中所述，所有代码都在一个名为 locations.js 的文件中...补丁出现了，我可以利用，但感谢您的意见

我留下的答案是给你的，也是给未来的任何人的。祝你好运。

你建议工作，但我不得不使用以下插件（phonegap build）name="com.indigoway.cordova.whitelist.whitelistplugin" spec="1.1.1" source="pgb"