Cordova phonegap 2.2+；jQuery+；Mapkit插件_Cordova_Jquery Mobile_Ios6_Mapkit_Phonegap Plugins

Cordova phonegap 2.2+；jQuery+；Mapkit插件

cordova jquery-mobile ios6

Cordova phonegap 2.2+；jQuery+；Mapkit插件,cordova,jquery-mobile,ios6,mapkit,phonegap-plugins,Cordova,Jquery Mobile,Ios6,Mapkit,Phonegap Plugins,我用jQuery Mobile创建了一个PhoneGap应用程序。我要做的是在标记中获取mapkit 用户不必单击任何按钮即可查看地图。我希望它一直出现在div中下面是我使用的整个示例这非常有效，但用户最多单击ShowMap来显示地图 <script type="text/javascript" charset="utf-8"> function onBodyLoad() { docume

我用jQuery Mobile创建了一个PhoneGap应用程序。我要做的是在标记中获取mapkit

用户不必单击任何按钮即可查看地图。我希望它一直出现在div中

下面是我使用的整个示例

这非常有效，但用户最多单击ShowMap来显示地图

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


函数onBodyLoad（）{
文件。添加的监听器（“deviceready”，OnDeviceraddy，false）；
}
/*调用此函数时，PhoneGap已初始化并准备好滚动*/
函数ondevicerady（）{
}
var引脚=[
{拉丁美洲：58.389508，
伦敦：13.843042，
标题：“地点1”，
副标题：“地名”，
平色：“紫色”，
选择：正确，
索引：0
},
]
函数showMap（）{
//做你的事！
变量映射选项={
身高：360，
直径：1000，
抵销：25，
纬度：引脚[0]。纬度，
lon:pins[0]。lon
};
window.plugins.mapKit.showMap（）；
window.plugins.mapKit.setMapData（mapOptions）；
window.plugins.mapKit.addMapPins（pins）；
}
显示

这很有效。但是我想做同样的事情，但是用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>


$（文档）.ready（函数（）{
var initialLocation=new google.maps.LatLng（37.654，-77.980）；
变量myOptions={
缩放：12，
中心：初始位置，
mapTypeId:google.maps.mapTypeId.ROADMAP
};
var map=new google.maps.map（document.getElementById（“map_canvas”），myOptions）；
});

如果要自动加载地图，只需在页面加载时调用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

如果要在加载页面时自动显示地图。你可以这样做

$(document).ready(function(){

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

});

非常感谢。但是我想将地图自动加载到div标记中。我对jquery和java非常陌生。就像谷歌地图exempel，那是不可能的。此mapkit插件将地图作为与web视图分离的图层加载。