///////// 更新 ////////
好的,经过几天的故障排除,我设法让地图在两台 Android 设备上都能正常显示。
原来我需要一起做以下事情:
- 在我的 index.html 中为谷歌地图使用不同的 src URL,即:
https://maps.googleapis.com/maps/api/js?sensor=false
- 我需要在我的 config.xml 中允许访问所有内容:
<access origin="*" subdomains="true"/>
现在主要问题是我不想将所有内容都列入白名单,但如果我允许 *.google.com、*.googleapis.com、*.gstatic.com 等的常见嫌疑人,我会在 Android 4.2.2 设备上遇到一些奇怪的行为仅- 例如,如果我对 src URL 使用 https 并且标记根本不会显示,则地图底部不会完全显示(缺少最后一行图块)。但是,通过将所有内容列入白名单,一切正常。
我想我会开始一个关于白名单域和我遇到的问题的新线程,因为我似乎找不到任何关于它的信息。
//////// 原始问题 ////////
我正在用 phonegap 和 jquery mobile 构建一个应用程序。在其中一个页面上,我只想显示带有标记等的地图。
但是我现在面临的问题是:
- 地图在台式 PC 上的 Chrome 上显示正常
- 地图在运行 android 2.2.2 的真实 Android 设备 (HTC Desire) 上显示正常
- 地图根本无法在 Android 4.2.2 上的真实 Android 设备(Sony Xperia Z1)上显示
更新:我还在运行 4.2.2 的 HTC One 上进行了测试——同样的问题,地图不显示。
HTML
<div data-role="page" id="mappage">
<div data-theme="a" data-role="header">
<h3>
Map
</h3>
</div>
<div data-role="content" id="content">
<div id="map_canvas" style="height:100%"></div>
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
<h3>
</h3>
</div>
查询:
$(document).on('pageinit', '#mappage',function(){
BuildMap( 50.725,-3.528,50.726,-3.526 );
function BuildMap( lat_shop, long_shop, lat_phone, long_phone ){
var minZoomLevel = 16;
var map = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: minZoomLevel,
center: new google.maps.LatLng( lat_shop, long_shop ),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker_shop = new google.maps.Marker({
position: new google.maps.LatLng( lat_shop, long_shop ),
map: map
});
var marker_phone = new google.maps.Marker({
position: new google.maps.LatLng( lat_phone, long_phone ),
map: map
});
}
});
CSS:
#content {
padding: 0;
position : absolute !important;
top : 40px !important;
right : 0;
bottom : 40px !important;
left : 0 !important;
}
其他可能有帮助的位:
我有一个按钮可以链接到页面以显示地图。在桌面和 2.2.2 上它工作正常。在 4.2.2 上,它突出显示了按钮,但没有更改页面。我猜是因为代码在'pageinit'中运行,所以它遇到了问题并且没有进一步发展。
我将'pageinit'更改为'pageshow' - 完全相同的问题没有区别 - 桌面和android 2 OK,android 4.2.2。什么都没有,只是一个空白页面(这一次它显然设法更改了页面)。