介绍一个用jquery mobile的ajax效果加载google map api,实现地图呈现的例子。
代码示例
首先是代码示例,使用iphone或android之类的手机查看,效果更佳
google map with jquery mobile
关键代码说明
map.js
map.js定义了加载地图的方法initiallize(),这个和常规网页中加载google map是一致的,因此这里不再细述。
map.html
地图的实际页面,在这个页面中不能直接加载google map的api,因为它是采用document.write再次写入script来实现的,所以我们采用callback的方式来加载它,见下面的代码:
head.js(
"map.js",
function() {
head.js("http://maps.google.com/maps/api/js?sensor=true&callback=initialize");
}
);
首先用head.js把initialize方法装载进来,然后用callback方式调用google map api。你可以试试用最平常的方式加载这段代码,看看有什么效果。
<script src="map.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=true&callback=initialize"></script>
6 replies on “如何在jquery mobile中加载google map api”
最近在搞 mobile 了啊,呵呵,我也想用用 jQuery Mobile呢,能说几句不?
这东西用手机访问似乎很慢啊
排除网络方面因素的话,在我的itouch上速度还行,比较流畅。
我最近试着用jquery mobile做一些小东西,但是这玩意目前还是alpha版,问题不少,定期从github抓最新的代码能解决一些bug,过段时间如果有点心得的话我再写点东西说说这个。
真的很慢啊,联通3G下似乎有些js、css无法载入,造成完全无法使用,
等候久会显示出一个丢失样式的页面
能不能定位的?
@xiaohei 在chrome, firefox, safari下可以定位,ie不行。如果放在iphone的safari里展示,也可以定位