地图不适用于Android的Cordova 2.0.0

时间:2012-12-24 06:41:44

标签: android cordova dictionary cordova-2.0.0

我已下载了PhoneGap 1.5.0文件的Google Map示例。它在Android中使用Cordova-1.5.0.js文件正常工作。但是当我保留Cordova-2.0.0.js文件时,Map不会显示。

try-catch块中没有错误。可能是什么问题?什么是Cordova 2.0.0中简单Map的样本?

我的代码如下:

的index.html

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
        <meta charset="utf-8">

        <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
        <link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css"rel="stylesheet"type="text/css" />
        <script type="text/javascript" src="googlemap.js"></script>
        <script type="text/javascript" src="reachability.js"></script>
        <script charset="utf-8" src="cordova-2.2.0.js"></script>

        <!-- iPad/iPhone specific CSS below, add after your main CSS >
        <link rel="stylesheet" media="only screen and (max-device-width: 1024px)" href="ipad.css" type="text/css" />
        <link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="iphone.css" type="text/css" />
        -->
        <!-- If your application is targeting iOS BEFORE 4.0 you MUST put json2.js from http://www.JSON.org/json2.js into your www directory and include it here -->
        <!-- <script>
            if (navigator.userAgent.toLowerCase().match(/android/)) {
                document.write('<script charset="utf-8" src="cordova-1.5.0.js"><\/script>');
            }
            else if (navigator.userAgent.toLowerCase().match(/iphone/) || navigator.userAgent.toLowerCase().match(/ipad/)) {
                document.write('<script charset="utf-8" src="cordova-1.5.0.js"><\/script>');
            }
        </script> -->
        <script type="text/javascript">
            // If you want to prevent dragging, uncomment this section
            /*
                function preventBehavior(e)
                {
                    e.preventDefault();
                };
                document.addEventListener("touchmove", preventBehavior, false);
            */

            /* If you are supporting your own protocol, the var invokeString will contain any arguments to the app launch.
               see http://iosdevelopertips.com/cocoa/launching-your-own-application-via-a-custom-url-scheme.html
               for more details -jm */
            /*
                function handleOpenURL(url)
                {
                    // TODO: do something with the url passed in.
                }
            */

            function onBodyLoad(){
                document.addEventListener("deviceready", onDeviceReady, false);
            }

            /* When this function is called, Cordova has been initialized and is ready to roll */
            /* If you are supporting your own protocol, the var invokeString will contain any arguments to the app launch.
               see http://iosdevelopertips.com/cocoa/launching-your-own-application-via-a-custom-url-scheme.html
               for more details -jm */
            function onDeviceReady()
            {
                var reachability = new Reachability();
                if(reachability.IsNotConnected()){
                    navigator.notification.alert('No internet connection available',null, '', 'OK');
                }
                else{
                    try{
                    var map = new GoogleMap();
                    map.initialize();
                    }catch(e){
                        alert(e.message);
                    }
                }
            }
        </script>
    </head>
    <body onload="onBodyLoad()">
        <div id="map_canvas">
            Couldn't load map because there was no internet connection available
        </div>
    </body>
</html>

googleMap.js

function GoogleMap(){

    this.initialize = function(){
        try{
            var map = showMap();
        }
        catch(e) {
            alert(e.message);
        }
    }

    var showMap = function(){
        var mapOptions = {
            zoom: 4,
            center: new google.maps.LatLng(-33, 151),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        try {
            var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
        }
        catch(e) {
            alert(e.message);
        }
        return map;
    }
}

reachability.js

function Reachability(){
    this.IsNotConnected = function(){
        if(navigator.network.connection.type == Connection.NONE || navigator.network.connection.type == Connection.UNKNOWN)
        {
            return true;
        }
        else
        {
            return false;
        }
    }
}

1 个答案:

答案 0 :(得分:1)

<!DOCTYPE html>
<html>
    <head>
        <title></title>

        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />

        <meta charset="utf-8">

        <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>

        <link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css"rel="stylesheet"type="text/css" />

        <script type="text/javascript" src="googlemap.js"></script>
        <script type="text/javascript" src="reachability.js"></script>
        <script charset="utf-8" src="cordova-2.2.0.js"></script>

        <!-- iPad/iPhone specific CSS below, add after your main CSS >
            <link rel="stylesheet" media="only screen and (max-device-width: 1024px)" href="ipad.css" type="text/css" />
            <link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="iphone.css" type="text/css" />
        -->
        <!-- If your application is targeting iOS BEFORE 4.0 you MUST put json2.js from http://www.JSON.org/json2.js into your www directory and include it here -->

        <script type="text/javascript">
            // If you want to prevent dragging, uncomment this section
            /*
                function preventBehavior(e)
                {
                    e.preventDefault();
                };
                document.addEventListener("touchmove", preventBehavior, false);
            */

            /* If you are supporting your own protocol, the var invokeString will contain any arguments to the app launch.
               see http://iosdevelopertips.com/cocoa/launching-your-own-application-via-a-custom-url-scheme.html
               for more details -jm */
            /*
                function handleOpenURL(url)
                {
                    // TODO: do something with the url passed in.
                }
            */

            function onBodyLoad(){
                //document.addEventListener("deviceready", onDeviceReady, false);
                  onDeviceReady()
            }

            /* When this function is called, Cordova has been initialized and is ready to roll */
            /* If you are supporting your own protocol, the var invokeString will contain any arguments to the app launch.
               see http://iosdevelopertips.com/cocoa/launching-your-own-application-via-a-custom-url-scheme.html
               for more details -jm */
            function onDeviceReady()
            {
                // var reachability = new Reachability();
                // if(reachability.IsNotConnected()){
                //     navigator.notification.alert('No internet connection available',null, '', 'OK');
                // }
                // else {
                //     try{

                           var map = new GoogleMap();
                           map.initialize();

                //     }
                //     catch(e){
                //         alert(e.message);
                //     }
                // }
            }
        </script>
    </head>

    <body onload="onBodyLoad()">
        <div id="map_canvas">
            Couldn't load map because there was no internet connection available
        </div>
    </body>
</html>

在Google Chrome中运行代码。 不是:检查插件是否正常工作。