我是新手在手机上使用谷歌地图，我正在使用phonegap框架。下面是我用于在Android手机上获取谷歌地图的示例代码。但它是版本3.8，当我尝试加载最新版本8.1.0时，它显示一个空白屏幕。因此，在使用谷歌地图时需要帮助才能朝着正确的方向前进。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, minimum-scale=1, maximum-scale=1">
<title>Map</title>
<link href="css/jquery/jquery.mobile-1.4.2.min.css" rel="stylesheet"
type="text/css" />
<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.4.2.min.js"></script>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" src="cordova-2.4.0.js"></script>
<script type="text/javascript">
var map;
var marker;
var infowindow;
var watchID;
$(document).ready(function(){
document.addEventListener("deviceready", onDeviceReady, false);
//for testing in Chrome browser uncomment
//onDeviceReady();
});
//PhoneGap is ready function
function onDeviceReady() {
$(window).unbind();
$(window).bind('pageshow resize orientationchange', function(e){
max_height();
});
max_height();
google.load("maps", "3.8", {"callback": map, other_params: "sensor=true&language=en"});
map();
}
function max_height(){
var h = $('div[data-role="header"]').outerHeight(true);
var f = $('div[data-role="footer"]').outerHeight(true);
var w = $(window).height();
var c = $('div[data-role="content"]');
var c_h = c.height();
var c_oh = c.outerHeight(true);
var c_new = w - h - f - c_oh + c_h;
var total = h + f + c_oh;
if(c_h<c.get(0).scrollHeight){
c.height(c.get(0).scrollHeight);
}else{
c.height(c_new);
}
}
function map(){
var latlng = new google.maps.LatLng(55.17, 23.76);
var myOptions = {
zoom: 6,
center: latlng,
streetViewControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoomControl: true
};
map = new google.maps.Map(document.getElementById("map"), myOptions);
google.maps.event.addListenerOnce(map, 'tilesloaded', function(){
//get geoposition once
//navigator.geolocation.getCurrentPosition(geo_success, geo_error, { maximumAge: 5000, timeout: 5000, enableHighAccuracy: true });
//watch for geoposition change
watchID = navigator.geolocation.watchPosition(geo_success, geo_error, { maximumAge: 5000, timeout: 5000, enableHighAccuracy: true });
});
}
function geo_error(error){
//comment
alert('code: ' + error.code + '\n' + 'message: ' + error.message + '\n');
}
function geo_success(position) {
map.setCenter(new google.maps.LatLng(position.coords.latitude, position.coords.longitude));
map.setZoom(15);
var info =
('Latitude: ' + position.coords.latitude + '<br>' +
'Longitude: ' + position.coords.longitude + '<br>' +
'Altitude: ' + position.coords.altitude + '<br>' +
'Accuracy: ' + position.coords.accuracy + '<br>' +
'Altitude Accuracy: ' + position.coords.altitudeAccuracy + '<br>' +
'Heading: ' + position.coords.heading + '<br>' +
'Speed: ' + position.coords.speed + '<br>' +
'Timestamp: ' + new Date(position.timestamp));
var point = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
if(!marker){
//create marker
marker = new google.maps.Marker({
position: point,
map: map
});
}else{
//move marker to new position
marker.setPosition(point);
}
if(!infowindow){
infowindow = new google.maps.InfoWindow({
content: info
});
}else{
infowindow.setContent(info);
}
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
}
</script>
</head>
<body>
<!-- Main Page-->
<div data-role="page" data-theme="b" id="main">
<div data-role="header">
<h1>RealTrac</h1>
</div>
<div data-role="content">
<h3>Select the application</h3>
<a data-role="button" href="#jnytimetracker">Journey-Time Tracker</a>
<a data-role="button" href="#qtimetracker">Queue-Time Tracker </a>
</div>
</div>
<!-- First Page End -->
<div data-role="page" id="jnytimetracker">
<div data-role="header" data-theme="b">
<h1>Map Header</h1>
</div>
<div data-role="content" style="padding: 0;">
<div id="map" style="width: 100%; height: 100%;"></div>
</div>
<div data-role="footer" data-theme="b">
<h4>Map Footer</h4>
</div>
</div>
</html>
感谢
答案 0 :(得分：0)
我在移动网站上的谷歌地图上工作过。它基于JQuery mobile。这对我有用
这是JQM中最常见的问题。我完全同意@Omar的解决方案。
问题原因
JQM使用脚本在正常div上对div进行图层化，使其更加丰富，看起来更好
因此，当您初始化google map时，这些隐藏图层会导致问题完全显示
我在 Google 中研究的大部分时间都是地图显示在窗口的左上角：）。
轻松修复 这个仅用于JQM页面
$( document ).on( "pageshow", "#map", function() {
});
只需将您的谷歌地图代码放在上面的代码中，它的作用就是只有在加载了所有divs之后才会加载地图。请参阅JQM网站上的活动pageshow。
我的剧本看起来像这样
$( document ).on( "pageshow", "#map-page", function() {
<?php $coordenadas=explode(',',$fila['Googlemap']);?>
var defaultLatLng = new google.maps.LatLng('<?php echo $coordenadas[0];?>','<?php echo $coordenadas[1];?>');
$('#map-canvas').height( $(window).height() - $('#head1').height());
drawMap(defaultLatLng); // Default to Hollywood, CA when no geolocation support
//var latlng = marker.getPosition();
function drawMap(latlng) {
var myOptions = {
zoom: 18,
center: latlng,
streetViewControl:true,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
// Add an overlay to the map of current lat/lng
var marker = new google.maps.Marker({
position: latlng,
map: map,
title: "Greetings!"
});
// this is our gem
google.maps.event.addDomListener(window, "resize", function() {
var center = map.getCenter();
google.maps.event.trigger(map, "resize");
map.setCenter(center);
});
}
});
只需将#map选择器更改为必须加载地图的页面的ID。
希望我帮助过你或其他一直面临同样问题的人：）
谢谢＆amp;问候