Google maps 地图未在Cordova Android中显示_Google Maps_Cordova_Geolocation

Google maps 地图未在Cordova Android中显示

google-maps cordova geolocation

Google maps 地图未在Cordova Android中显示,google-maps,cordova,geolocation,Google Maps,Cordova,Geolocation,我按照以下说明使用Cordova构建了一个Android应用程序除了在我运行emulate browser或emulate android时显示的地图外，所有这些都运行得很好，但在我将apk安装到我的J5三星手机上时显示的地图除外 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="format-detection" content="t

我按照以下说明使用Cordova构建了一个Android应用程序

除了在我运行emulate browser或emulate android时显示的地图外，所有这些都运行得很好，但在我将apk安装到我的J5三星手机上时显示的地图除外

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


你好，世界
html{高度：100%}
正文{高度：100%；边距：0；填充：0}
#地图{高度：100%}
音差
连接到设备
设备已准备就绪
添加标记
地图在这里
app.initialize（）；
//初始化Firebase
变量配置={
.............
};
firebase.initializeApp（配置）；

和js文件

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 = updatedLongitude;

        getMap(updatedLatitude, updatedLongitude);
    }
};

// Error callback

function onMapError(error) {
    console.log('code: ' + error.code + '\n' +
        'message: ' + error.message + '\n');
}

// Watch your changing position

function watchMapPosition() {
    return navigator.geolocation.watchPosition
    (onMapWatchSuccess, onMapError, { timeout: 30000 });
}

function showMarkers(){
    for(var i=0;i<json.length;i++) {
        data = json[i];
        var latLong = new google.maps.LatLng(data.lat, data.lng);
        var marker = new google.maps.Marker({
            position: latLong
        });
        marker.setMap(map);
    }
}

function addMarker(){
    var newMarker = new Object();
    newMarker["lat"] = Latitude;
    newMarker["lng"] = Longitude;
    writeCoords("abc",Latitude, Longitude);
    json.push(newMarker);
    showMarkers();
}

function readMarkers(){
    var activeRef = firebase.database().ref('location/');

    activeRef.on('value', function(snapshot){
        snapshot.forEach(function(childSnapshot) {
            alert(childSnapshot.val().latitude);
        });
    });
}
watchMapPosition();


function writeCoords(userId, lat, lng){
    firebase.database().ref('location/' + firebase.database().ref().child('location').push().key).set({
        latitude: lat,
        longitude: lng
    });
}

var app = {
    // Application Constructor
    initialize: function() {
        document.addEventListener('deviceready', this.onDeviceReady.bind(this), false);
    },

    // deviceready Event Handler
    //
    // Bind any cordova events here. Common events are:
    // 'pause', 'resume', etc.
    onDeviceReady: function() {
        this.receivedEvent('deviceready');
    },

    // Update DOM on a Received Event
    receivedEvent: function(id) {
        var parentElement = document.getElementById(id);
        var listeningElement = parentElement.querySelector('.listening');
        var receivedElement = parentElement.querySelector('.received');

        listeningElement.setAttribute('style', 'display:none;');
        receivedElement.setAttribute('style', 'display:block;');

        console.log('Received Event: ' + id);
    }
};

app.initialize();

var测试=5；
var json=[
{
拉丁美洲：55.5，
液化天然气：-4
},
{
拉脱维亚：56，
液化天然气：-4.5
}
];
var纬度=未定义；
变量经度=未定义；
//获取地理坐标
函数getMapLocation（）{
navigator.geolocation.getCurrentPosition
（onMapSuccess，onmaperor，{enableHighAccurance:true}）；
}
//获取地理坐标的成功回调
var onMapSuccess=函数（位置）{
纬度=位置坐标纬度；
经度=position.coords.Longitude；
getMap（纬度、经度）；
};
//使用坐标获取地图
函数getMap（纬度、经度）{
变量映射选项={
中心：新google.maps.LatLng（0,0），
缩放：1，
mapTypeId:google.maps.mapTypeId.ROADMAP
};
map=新建google.maps.map
（document.getElementById（“map”）、mapOptions）；
var latLong=new google.maps.LatLng（纬度、经度）；
var marker=new google.maps.marker({
位置：拉特朗
});
//marker.setMap（map）；
map.setZoom（9）；
map.setCenter（marker.getPosition（））；
showmarks（）；
}
//成功回拨，用于观察您的位置变化
var onMapWatchSuccess=函数（位置）{
var updatedLatitude=position.coords.latitude；
var updatedLength=position.coords.longitude；
if（更新的纬度！=纬度和更新的经度！=经度）{
纬度=更新的纬度；
经度=更新的经度；
getMap（更新的纬度，更新的经度）；
}
};
//错误回调
函数onmaperor（错误）{
console.log（'code:'+error.code+'\n'+
'消息：'+error.message+'\n'）；
}
//注意你的位置变化
函数watchMapPosition（）{
返回navigator.geolocation.watchPosition
（onMapWatchSuccess，onMapError，{timeout:30000}）；
}
函数showMarkers（）{
对于（var i=0；i我做了两件事。安装了cordova插件添加cordova插件地理位置，并在安装后从手机上拔下usb。不确定是否需要这两件事，但它现在可以工作了
<?xml version='1.0' encoding='utf-8'?>
<widget id="com.example.hello" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <name>HelloWorld</name>
    <description>
        A sample Apache Cordova application that responds to the deviceready event.
    </description>
    <author email="dev@cordova.apache.org" href="http://cordova.io">
        Apache Cordova Team
    </author>
    <content src="index.html" />
    <plugin name="cordova-plugin-whitelist" spec="1" />
    <access origin="*" />
    <allow-intent href="http://*/*" />
    <allow-intent href="https://*/*" />
    <allow-intent href="tel:*" />
    <allow-intent href="sms:*" />
    <allow-intent href="mailto:*" />
    <allow-intent href="geo:*" />
    <platform name="android">
        <allow-intent href="market:*" />
    </platform>
    <platform name="ios">
        <allow-intent href="itms:*" />
        <allow-intent href="itms-apps:*" />
    </platform>
    <engine name="android" spec="~6.1.2" />
</widget>