Cordova Android应用安装到三星J5手机后地图无法显示求助

I get it—frustrating when your app works perfectly in emulators but breaks on a real device. Let's break down the likely issues and fixes for your map not showing on the Samsung J5:

First, here's your relevant code for reference:

HTML Code #

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8" /> 
    <meta name="format-detection" content="telephone=no" /> 
    <meta name="msapplication-tap-highlight" content="no" /> 
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" /> 
    <meta http-equiv="Content-Security-Policy" content="default-src *; script-src 'self' 'unsafe-inline' 'unsafe-eval' *; style-src 'self' 'unsafe-inline' *; img-src * data: 'unsafe-inline'"> 
    <!-- This is a wide open CSP declaration. To lock this down for production, see below. --> 
    <meta http-equiv="Content-Security-Policy" content="default-src * 'unsafe-inline' gap:; style-src 'self' 'unsafe-inline'; media-src *" /> 
    <!-- Good default declaration: * gap: is required only on iOS (when using UIWebView) and is needed for JS->native communication * https://ssl.gstatic.com is required only on Android and is needed for TalkBack to function properly * Disables use of eval() and inline scripts in order to mitigate risk of XSS vulnerabilities. To change this: * Enable inline JS: add 'unsafe-inline' to default-src * Enable eval(): add 'unsafe-eval' to default-src * Create your own at http://cspisawesome.com --> 
    <!-- <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: 'unsafe-inline' https://ssl.gstatic.com; style-src 'self' 'unsafe-inline'; media-src *" /> --> 
    <link rel="stylesheet" type="text/css" href="css/index.css" /> 
    <title>Hello World</title> 
</head> 
<style type="text/css"> 
    html { height: 100% } 
    body { height: 100%; margin: 0; padding: 0 } 
    #map { height: 100% } 
</style> 
<body> 
    <div class="app"> 
        <h1>PhoneGap</h1> 
        <div id="deviceready" class="blink"> 
            <p class="event listening">Connecting to Device</p> 
            <p class="event received">Device is Ready</p> 
        </div> 
    </div> 
    <div id="geolocation"></div> 
    <button type="button" onclick="addMarker()">Add Marker</button> 
    <div id="map">MAP HERE</div> 
    <script src="/__/firebase/4.13.0/firebase-app.js"></script> 
    <script src="/__/firebase/4.13.0/firebase-auth.js"></script> 
    <script src="/__/firebase/4.13.0/firebase-database.js"></script> 
    <script src="/__/firebase/4.13.0/firebase-messaging.js"></script> 
    <script src="/__/firebase/4.13.0/firebase-functions.js"></script> 
    <!-- Leave out Storage --> 
    <!-- <script src="/__/firebase/4.13.0/firebase-storage.js"></script> --> 
    <script src="/__/firebase/init.js"></script> 
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA8RwcNCgxRCRpiSgiRpr_InT2Vt-aDwPQ" type="text/javascript"></script> 
    <script type="text/javascript" src="cordova.js"></script> 
    <script type="text/javascript" src="js/index.js"></script> 
    <script type="text/javascript"> 
        app.initialize(); 
    </script> 
</body> 
</html> 
<script src="https://www.gstatic.com/firebasejs/4.13.0/firebase.js"></script> 
<script> 
    // Initialize Firebase 
    var config = { ............. }; 
    firebase.initializeApp(config); 
</script>

JavaScript Code #

var test=5; 
var json = [ 
    { lat: 55.5, lng: -4 }, 
    { lat:56, lng: -4.5 } 
]; 
var Latitude = undefined; 
var Longitude = undefined; 

// Get geo coordinates 
function getMapLocation() { 
    navigator.geolocation.getCurrentPosition (onMapSuccess, onMapError, { enableHighAccuracy: true }); 
} 

// Success callback for get geo coordinates 
var onMapSuccess = function (position) { 
    Latitude = position.coords.latitude; 
    Longitude = position.coords.longitude; 
    getMap(Latitude, Longitude); 
}; 

// Get map by using coordinates 
function getMap(latitude, longitude) { 
    var mapOptions = { 
        center: new google.maps.LatLng(0, 0), 
        zoom: 1, 
        mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    map = new google.maps.Map (document.getElementById("map"), mapOptions); 
    var latLong = new google.maps.LatLng(latitude, longitude); 
    var marker = new google.maps.Marker({ position: latLong }); 
    //marker.setMap(map); 
    map.setZoom(9); 
    map.setCenter(marker.getPosition()); 
    showMarkers(); 
} 

// Success callback for watching your changing position 
var onMapWatchSuccess = function (position) { 
    var updatedLatitude = position.coords.latitude; 
    var updatedLongitude = position.coords.longitude; 
    if (updatedLatitude != Latitude && updatedLongitude != Longitude) { 
        Latitude = updatedLatitude; 
        Longitude 

Key Issues & Fixes #

1. Conflicting Content Security Policy (CSP) Tags #

You have two separate CSP meta tags in your HTML, which can cause inconsistent enforcement—real devices like the Samsung J5 tend to follow CSP rules more strictly than emulators. The second tag overrides the first, and it doesn't explicitly allow Google Maps' script or image domains.

Replace both CSP tags with a single, targeted one that includes all necessary resources for Google Maps:

<meta http-equiv="Content-Security-Policy" content="
    default-src 'self' data: gap: https://maps.googleapis.com https://maps.gstatic.com 'unsafe-inline' 'unsafe-eval';
    style-src 'self' 'unsafe-inline' https://fonts.googleapis.com;
    script-src 'self' 'unsafe-inline' 'unsafe-eval' https://maps.googleapis.com;
    img-src 'self' data: https://maps.gstatic.com https://maps.googleapis.com;
    font-src 'self' https://fonts.gstatic.com
">

2. Restricted Google Maps API Key #

Emulators often use a different SHA-1 fingerprint than your release build (or even your debug build on a real device). If your API key is restricted to specific package names/SHA-1s, the Samsung J5 will be blocked.

• Head to your Google Cloud Console, find your Maps JavaScript API key.
• Add your app's package name and both the debug and release SHA-1 fingerprints (you can get the release fingerprint from your keystore using keytool -list -v -keystore your-release-key.keystore).

3. Missing Network Permissions #

Double-check that your config.xml includes these critical permissions—Cordova sometimes doesn't add them automatically, and real devices need them to load external resources like maps:

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

4. Map Initialization Before deviceready #

Cordova APIs (like geolocation) only work after the deviceready event fires. Your current code calls app.initialize() but doesn't explicitly tie map initialization to this event. Update your JS to wait for deviceready:

document.addEventListener("deviceready", onDeviceReady, false);

function onDeviceReady() {
    // Now all Cordova APIs are available
    getMapLocation();
}

Emulators might be lenient with timing, but real devices need this event to fire first.

5. Incomplete JavaScript Code #

Your provided JS cuts off mid-function (onMapWatchSuccess has no closing brackets or logic). Syntax errors like this can silently break map loading on real devices—fix any missing code and ensure there are no console errors.

Debugging Tip #

Connect your Samsung J5 to your computer, open Chrome, and go to chrome://inspect to access the device's web console. This will show you exactly why the map isn't loading (CSP errors, API key issues, network failures, etc.).

内容的提问来源于stack exchange，提问作者tagliatelli