phonegap 2.2 + jQuery + Mapkit 插件
Posted
技术标签:
【中文标题】phonegap 2.2 + jQuery + Mapkit 插件【英文标题】：phonegap 2.2 + jQuery + Mapkit plugin 【发布时间】：2012-11-03 12:36:00 【问题描述】：我使用 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>
这很好用。但我想做同样的事情，但使用 mapKit 插件用于 phonegap 而不是谷歌地图。
<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>
【问题讨论】：
【参考方案1】：如果您希望地图自动加载，只需在页面加载时调用 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
【讨论】：
谢谢！但我想将地图自动加载到 div 标签中。我对 jquery 和 java 很陌生。就像谷歌地图示例一样。 这是不可能的。这个 mapkit 插件将地图加载为与 web 视图分开的图层。【参考方案2】：如果您想在页面加载时自动显示地图。你可以这样做...
$(document).ready(function()
//Your map integration
window.plugins.mapKit.showMap();
);
【讨论】：
以上是关于phonegap 2.2 + jQuery + Mapkit 插件的主要内容，如果未能解决你的问题，请参考以下文章