在其他文件中创建 GoogleMap 对象 Cordova/PhoneGap

Question

我在使用 Cordova/PhoneGap 在 JavaScrpit 中创建 GoogleMap 对象时遇到问题。我有 2 JavaScript 个文件。 index.js（主文件）和 Map.js，我正在其中创建 GoogleMap 对象。

在 Map.js 我有这个：

    var Map = {
        /*Google Map Object*/
var googleMap:null,
/*Array of Waypoints.Start Waypoint is on 0 index, last on last*/
var waypointsArray = [],
/**/
        onSuccessLoad : function(position) {
            var longitude = position.coords.longitude;
            var latitude = position.coords.latitude;
            var latLong = new google.maps.LatLng(latitude, longitude);

            var mapOptions = {
                center : latLong,
                zoom : 3,
                mapTypeId : google.maps.MapTypeId.ROADMAP
            };

            this.googleMap = new google.maps.Map(document.getElementById("map"),
                    mapOptions);
            //addWaypoint(latLong,'img/startNode.png');

        },

}

在 index.js 中：

var app = {
    watchID : null,
    // Application Constructor
    initialize : function() {
        this.bindEvents();
    },
    // Bind Event Listeners
    //
    // Bind any events that are required on startup. Common events are:
    // 'load', 'deviceready', 'offline', and 'online'.
    bindEvents : function() {
        document.addEventListener('deviceready', this.onDeviceReady, false);
    },
    // deviceready Event Handler
    //
    // The scope of 'this' is the event. In order to call the 'receivedEvent'
    // function, we must explicitly call 'app.receivedEvent(...);'
    onDeviceReady : function() {
        // app.receivedEvent('deviceready');


        navigator.geolocation.getCurrentPosition(Map.onSuccessLoad,
                GPSErrorHandler.checkGPSConnection);
    },

};

app.initialize();

和我的index.html

<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<meta name="viewport"
    content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<title>Working Google Maps</title>
</head>
<body>
    <div id="map"></div>
    <script type="text/javascript" src="cordova.js"></script>


    <script type="text/javascript" src="js/index.js"></script>
            <script type="text/javascript" src="js/ErrorHandlers/GPSErrorHandler.js"></script>
    <script type="text/javascript" src="js/ErrorHandlers/InternetErrorHandler.js"></script>
    <script type="text/javascript" src="js/Map.js"></script>

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

    </script>
</body>
</html>

当我使用 phonegap compile android 将其编译为 Android 时，APK 创建，但是当我在 Android 设备上安装 apk 时屏幕上没有任何内容。但是当我将所有代码都放在一个文件中时，没有类和 Map var 它正在工作......所以我的代码有什么问题？

GoogleApi 密钥很好我已将其更改为在此处粘贴代码，所以这不是问题。

Answer 1

调试证书与您的生产证书不同。您需要将两者添加到您的 API 控制台中的 Google 地图键条目作为单独的行 - 每个具有相同的 packageId，但自然不同的 SHA1 哈希。

由于您使用的是 javascript，因此最好使用 Google 地图 v3 api

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>

Answer 2

请删除 googleMap 中的 var 关键字，并且 waypointsArray 您正在使用 Map 对象，因为您需要添加属性（名称和值对）所以只需输入 googleMap:null, waypointsArray: []，然后检查

在其他文件中创建 GoogleMap 对象 Cordova/PhoneGap

Create GoogleMap Object in other file Cordova/PhoneGap

javascript

android

cordova

phonegap-build