2

jQuery Mobile で PhoneGap アプリを作成しました。私がやりたいのは、タグで mapkit を取得することです。

ユーザーは、マップを表示するためにボタンをクリックする必要はありません。常にdivに表示したい。

これが私が使用する全体の例です https://github.com/phonegap/phonegap-plugins/blob/master/iPhone/MapKitPlug/example/index.html

これはうまく機能しますが、ユーザーはほとんどの場合、[マップを表示] をクリックしてマップを表示します。

<script type="text/javascript" charset="utf-8">

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

                    /* When this function is called, PhoneGap has been initialized and is ready to roll */
                    function onDeviceReady() {

                    }

                    var pins = [
                    { lat:58.389508,
                            lon:13.843042,
                            title:"place1",
                            subTitle:"placename",
                            pinColor:"purple", 
                            selected:true,
                            index:0
                        },
                                      ]

                     function showMap() {
                        // do your thing!
                        var mapOptions = {
                      height: 360,
                      diameter: 1000,
                      offsetTop: 25,
                      lat: pins[0].lat,
                      lon: pins[0].lon
                    };

                        window.plugins.mapKit.showMap();
                        window.plugins.mapKit.setMapData(mapOptions);
                        window.plugins.mapKit.addMapPins(pins);     
                    }

                </script>      

        </head>

        <body onload="onBodyLoad()">  


                    <button style="top:400px;position:absolute;" onclick="showMap()">Show</button>

これはうまくいきます。しかし、同じことをしたいのですが、Googleマップの代わりにphonegap用のmapKitプラグインを使用しています。

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

    <script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>  
    <script type="text/javascript">

        $(document).ready(function(){
                    var initialLocation = new google.maps.LatLng(37.654,-77.980);
                        var myOptions = {
                                        zoom: 12,
                                        center: initialLocation,
                                        mapTypeId: google.maps.MapTypeId.ROADMAP
                        };
                        var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
            });
</script>   
</head> 
<body>
<div data-role="content">   
    <!--images go here -->
    <div class="img_shadow" style="padding:4px;">
                    <div id="map_canvas" style="height:130px;"></div>
    </div>
</div>      
</div><!-- /page -->

</body>
4

2 に答える 2

0

ページがロードされたときに自動的に地図を表示したい場合。あなたはこのようにすることができます...

$(document).ready(function(){

   //Your map integration
   window.plugins.mapKit.showMap();

});
于 2013-01-16T10:20:20.370 に答える
0

マップを自動的にロードする場合は、ページのロード時に showMap() を呼び出すだけです。

showMap 関数を定義した後:

function showMap() {
  // do your thing!
  var mapOptions = {
  height: 360,
  diameter: 1000,
  offsetTop: 25,
  lat: pins[0].lat,
  lon: pins[0].lon
 };

 window.plugins.mapKit.showMap();
 window.plugins.mapKit.setMapData(mapOptions);
 window.plugins.mapKit.addMapPins(pins);   
}
showMap(); // call it
于 2012-11-03T18:16:27.940 に答える