Jquery Mobile未加载谷歌地图（刷新除外） [英] Jquery Mobile not loading Google Map (except on refresh)
问题描述
我正在使用Jquery Mobile 1.0和Google Maps v3加载用户位置地图。当通过直接url访问地图时，地图加载得很好，但是当从链接访问时，地图会窒息并且不显示任何内容。如果我刷新页面，地图加载正常。
I'm using Jquery Mobile 1.0 and Google Maps v3 to load a user location map. The map loads fine when accessed via direct url but when accessed from a link, it chokes up and nothing is displayed. If I refresh the page, the map loads fine.
以下是一个模拟问题的测试版本的链接：http://stacefelder.com/stacefelder/Tests/index.html
点击我的地图查看...没有任何内容。点击刷新以查看地图加载。
Here's a link to a test build that mimics the issue: http://stacefelder.com/stacefelder/Tests/index.html click 'My Map' to see ... nothing. Hit refresh to see the map load.
以下是地图页面标题中的脚本：
Here's the script in the map page header:
<script type="text/javascript">
$('#basic_map').live("pageshow", function() {
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position){
initialize(position.coords.latitude,position.coords.longitude);
});
}
});
function initialize(lat,lng) {
var latlng = new google.maps.LatLng(lat, lng);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
}
</script>
以下是地图页面主体中的html：
And here's the html in the map page body:
<div data-role="page" id="basic_map">
<div data-role="header">
<h1>map test 901</h1>
</div>
<div id="map_canvas"></div>
</div>
我也试过 pagecreate ，而不是 pageshow 没有明显区别。任何想法我在这里失踪？
感谢您的任何建议！
I've also tried pagecreate instead of pageshow with no discernable difference. Any idea what I'm missing here?
Thanks for any and all suggestions!
推荐答案
如果您从另一个页面导航到此页面，jQM只会引入JS中的div [data-role =page]标签，所以如果你的JS在你的< head> 标签中不会被拉入，是什么导致你的问题。
If you navigate to this page from another page, jQM only pulls in the JS within your div[data-role="page"] tags, so if your JS is in your <head> tags that won't be pulled in, this is what is causing your issues.
另外，你应该使用pageinit而不是pageshow，pageshow会重新启动，如果你回到页面等...如果你有一个页面被加载不止一次，多个页面使用相同的ID，有一个聪明的技巧，使用最后的div [数据角色=页面]
Also yes you should use pageinit instead of pageshow, pageshow will re-fire if you navigate back to a page etc... if you have issues with a page being loaded more than once and multiple pages with the same id, there's a clever trick to use the last div[data-role="page"]
jQuery（div：jqmData（role ='page'）：last）。bind（'pageinit'，function（）{
因此，对于无故障的答案，试试这个：
So for a trouble free answer try this:
<div data-role="page" id="basic_map">
<script type="text/javascript">
$("div:jqmData(role='page'):last").bind('pageinit', function() {
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position){
initialize(position.coords.latitude,position.coords.longitude);
});
}
});
function initialize(lat,lng) {
var latlng = new google.maps.LatLng(lat, lng);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
}
</script>
<div data-role="header">
<h1>map test 901</h1>
</div>
<div id="map_canvas"></div>
</div>
这篇关于Jquery Mobile未加载谷歌地图（刷新除外）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
