0

PhoneGap 1.5.0 ファイルの Google マップ サンプルをダウンロードしました。ファイルを使用してAndroidで正常に動作していCordova-1.5.0.jsます。しかし、Cordova-2.0.0.js ファイルを保持すると、Map が表示されません。

try-catch ブロックでエラーが発生していません。問題は何ですか?Cordova 2.0.0 の単純なマップのサンプルは何ですか?

私のコードは以下の通りです:

索引.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;
    }
}

到達可能性.js

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

1 に答える 1

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 で実行します。注:プラグインが機能しているかどうかを確認してください。

于 2012-12-26T11:53:17.263 に答える