【发布时间】：2014-05-06 10:30:55
【问题描述】：
我正在尝试将 google map api v3 合并到我的 phonegap 应用程序中。但是，它只加载在屏幕的左上角。这是我的代码。
<!DOCTYPE html>
<html>
<head>
<title>QC App</title>
<!--<meta name="viewport" content="width=device-width, initial-scale=1">-->
<meta content="initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/jquery.mobile-1.4.0.min.js"></script>
<link href="css/jquery.mobile.structure-1.4.0.min.css" rel="stylesheet">
<link href="css/jquery.mobile.theme-1.4.0.min.css" rel="stylesheet">
<link href="css/jquery.mobile-1.4.0.min.css" rel="stylesheet">
<link href="css/photoswipe.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link href="css/listview-grid.css" rel="stylesheet">
<script src="js/script.js"></script>
<style>
#map-canvas {
height: 90%;
margin: 0px;
padding: 0px
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
function writeAddressName(latLng) {
var geocoder = new google.maps.Geocoder();
geocoder.geocode({
"location": latLng
},
function(results, status) {
if (status == google.maps.GeocoderStatus.OK)
document.getElementById("address").innerHTML = results[0].formatted_address;
else
document.getElementById("error").innerHTML += "Unable to retrieve your address" + "<br />";
});
}
function geolocationSuccess(position) {
var userLatLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
// Write the formatted address
writeAddressName(userLatLng);
var myOptions = {
zoom : 16,
center : userLatLng,
mapTypeId : google.maps.MapTypeId.ROADMAP
};
// Draw the map
var mapObject = new google.maps.Map(document.getElementById("map"), myOptions);
google.maps.event.addListenerOnce(mapObject, 'idle', function() {
google.maps.event.trigger(mapObject, 'resize');
});
// Place the marker
new google.maps.Marker({
map: mapObject,
position: userLatLng
});
// Draw a circle around the user position to have an idea of the current localization accuracy
var circle = new google.maps.Circle({
center: userLatLng,
radius: position.coords.accuracy,
map: mapObject,
fillColor: '#0000FF',
fillOpacity: 0.5,
strokeColor: '#0000FF',
strokeOpacity: 1.0
});
mapObject.fitBounds(circle.getBounds());
}
function geolocationError(positionError) {
document.getElementById("error").innerHTML += "Error: " + positionError.message + "<br />";
}
function geolocateUser() {
// If the browser supports the Geolocation API
if (navigator.geolocation)
{
var positionOptions = {
enableHighAccuracy: true,
timeout: 10 * 1000 // 10 seconds
};
navigator.geolocation.getCurrentPosition(geolocationSuccess, geolocationError, positionOptions);
}
else
document.getElementById("error").innerHTML += "Your browser doesn't support the Geolocation API";
}
window.onload = geolocateUser;
</script>
</head>
<body>
<!-- homepage --> <!-- id home -->
<div data-role="page" id="home">
<div data-role="header" data-theme="b" data-position="fixed">
<h1 class="header_style"> <img src="images/QC_App_White.png"> </h1>
</div><!-- /header -->
<div data-role="content">
<div class="pt-menu">
<a data-theme="d" data-corners="false" data-role="button" href="#attractions">
<img src="images/icons/256/256_attractions_nowords_colored.png" alt="attractions">
<p>Attractions</p>
</a>
<a data-theme="d" data-corners="false" data-role="button" href="#attractions">
<img src="images/icons/256/256_dining_nowords_colored.png" alt="dining">
<p>Dining</p>
</a>
<a data-theme="d" data-corners="false" data-role="button" href="#attractions">
<img src="images/icons/256/256_educationandbusiness_nowords_colroed.png" alt="educationbusiness">
<p>Education</p>
</a>
<a data-theme="d" data-corners="false" data-role="button" href="#attractions">
<img src="images/icons/256/256_activitiesandevents_nowords_colored.png" alt="eventsactivities">
<p>Events</p>
</a>
<a data-theme="d" data-corners="false" data-role="button" href="#attractions">
<img src="images/icons/256/256_holyplaces_nowords_colored.png" alt="holyplaces">
<p>Holy Places</p>
</a>
<a data-theme="d" data-corners="false" data-role="button" href="#attractions">
<img src="images/icons/256/256_hospitals_nowords_colored.png" alt="hospital">
<p>Hospitals</p>
</a>
<a data-theme="d" data-corners="false" data-role="button" href="#attractions">
<img src="images/icons/256/256_accommodations_nowords_colored.png" alt="hotels">
<p>Hotels</p>
</a>
<a data-theme="d" data-corners="false" data-role="button" href="#attractions">
<img src="images/icons/256/256_shopping_nowords_colored.png" alt="shopping">
<p>Shopping</p>
</a>
<a data-theme="d" data-corners="false" data-role="button" href="#attractions">
<img src="images/icons/256/256_services_nowords_colored.png" alt="services">
<p>Services</p>
</a>
<a data-theme="d" data-corners="false" data-role="button" href="#attractions">
<img src="images/icons/256/256_transportation_nowords_colored.png" alt="transportation">
<p>Transport</p>
</a>
<a data-theme="d" data-corners="false" data-role="button" href="#">
<img src="images/icons/256/256_maps_nowords_colored.png" alt="map">
<p>Map</p>
</a>
</div>
</div>
</div>
<!-- /responsive grid --- list of categories--> <!-- id attractions -->
<div data-role="page" id="attractions">
<div data-role="header" data-theme="b" data-position="fixed">
<h1>Attractions</h1>
<a href="#left-panel1" data-icon="grid" class="ui-btn-left">Menu</a>
<a href="#map" class="ui-btn ui-shadow ui-corner-all ui-icon-location ui-btn-icon-notext ui-btn-inline"></a>
</div><!-- /header -->
<div role="main" class="my-page ui-content jqm-fullwidth">
<ul data-role="listview" data-filter="true" data-filter-placeholder="Search..." data-inset="true">
<li><a href="#LaMesaDam">
<img src="images/LaMesaDam.png" class="ui-li-thumb">
<h2>La Mesa Dam</h2>
<p>121 km</p>
<!--<p class="ui-li-aside">iOS</p>-->
</a></li>
<li><a href="#LaMesaDam">
<img src="images/LaMesaEcoPark.png" class="ui-li-thumb">
<h2>La Mesa Eco Park</h2>
<p>at Quezon City</p>
<!--<p class="ui-li-aside">BlackBerry</p>-->
</a></li>
<li><a href="#LaMesaDam">
<img src="images/QuezonMemorialCircle.png" class="ui-li-thumb">
<h2>Quezon Memorial Circle</h2>
<p>at Quezon City</p>
<!--<p class="ui-li-aside">Windows Phone</p>-->
</a></li>
<li><a href="#LaMesaDam">
<img src="images/LaMesaDam.png" class="ui-li-thumb">
<h2>La Mesa Dam</h2>
<p>at Quezon City</p>
<!--<p class="ui-li-aside">iOS</p>-->
</a></li>
<li><a href="#LaMesaDam">
<img src="images/LaMesaEcoPark.png" class="ui-li-thumb">
<h2>La Mesa Eco Park</h2>
<p>at Quezon City</p>
<!--<p class="ui-li-aside">BlackBerry</p>-->
</a></li>
<li><a href="#LaMesaDam">
<img src="images/QuezonMemorialCircle.png" class="ui-li-thumb">
<h2>Quezon Memorial Circle</h2>
<p>at Quezon City</p>
<!--<p class="ui-li-aside">Windows Phone</p>-->
</a></li>
<li><a href="#LaMesaDam">
<img src="images/LaMesaDam.png" class="ui-li-thumb">
<h2>La Mesa Dam</h2>
<p>at Quezon City</p>
<!--<p class="ui-li-aside">iOS</p>-->
</a></li>
<li><a href="#LaMesaDam">
<img src="images/LaMesaEcoPark.png" class="ui-li-thumb">
<h2>La Mesa Eco Park</h2>
<p>at Quezon City</p>
<!--<p class="ui-li-aside">BlackBerry</p>-->
</a></li>
<li><a href="#LaMesaDam">
<img src="images/QuezonMemorialCircle.png" class="ui-li-thumb">
<h2>Quezon Memorial Circle</h2>
<p>at Quezon City</p>
<!--<p class="ui-li-aside">Windows Phone</p>-->
</a></li>
</ul>
</div><!-- /content -->
<!-- id nav-panel-->
<div data-role="panel" id="left-panel1" data-theme="b">
<ul data-role="listview" data-theme="b" data-divider-theme="b" data-inset="false">
<li data-icon="false"><a href="#home">Home</a></li>
<li data-icon="false"><a href="#map">Map</a></li>
<li data-role="list-divider">Categories</li>
<li><a href="#attractions">Attractions</a></li>
<li><a href="#home">Dining</a></li>
<li><a href="#home">Education</a></li>
<li><a href="#home">Events</a></li>
<li><a href="#home">Holy Places</a></li>
<li><a href="#home">Hospitals</a></li>
<li><a href="#home">Hotels</a></li>
<li><a href="#home">Shopping</a></li>
<li><a href="#home">Services</a></li>
<li><a href="#home">Transport</a></li>
</ul>
</div><!-- /panel -->
</div><!-- /page -->
<!-- portfolio page 1 -->
<div data-role="page" id="LaMesaDam" data-title="LaMesaDam">
<div data-role="header" data-theme="b" data-position="fixed">
<h1>Attractions</h1>
<a href="#left-panel2" data-icon="grid" class="ui-btn-left">Menu</a>
<a href="#" class="ui-btn ui-shadow ui-corner-all ui-icon-location ui-btn-icon-notext ui-btn-inline"></a>
</div>
<div role="main" class="desc_img my-page ui-content jqm-fullwidth">
<div>
<img class="imgdisplay" src="images/LaMesaDam.png">
<p> <img style="width:16px;" src="images/icons/193-location-arrow.png"> 12 km </p>
</div>
<div role="main" class="my-page desc_page ui-content jqm-fullwidth">
<h1>La Mesa Dam</h1>
<h5>The La Mesa Dam is a dam in Quezon City in the Philippines. It is part of the Angat-Ipo-La Mesa water system, which supplies most of the water supply of Metro Manila. The La Mesa Dam is an earth dam whose reservoir can hold up to 50.5 million cubic meters occupying an area of 27 square kilometers.
Metro Manila and its surrounding areas are divided into two water concessionaires: Maynilad Water (red) and Manila Water (blue).
The water collected in the reservoir is treated on-site by the Maynilad Water Services, and at the Balara Treatment Plant further south by the Manila Water. Both water companies are private concessionaires awarded by the Metropolitan Waterworks and Sewerage System, the government agency in charge of water supply.</h5>
<a href="#nearby" class="ui-btn ui-shadow ui-corner-all ui-btn-icon-right ui-icon-carat-r">Nearby Places</a>
</div>
</div>
<!-- id nav-panel-->
<div data-role="panel" id="left-panel2" data-theme="b">
<ul data-role="listview" data-theme="b" data-divider-theme="b" data-inset="false">
<li data-icon="false"><a href="#home">Home</a></li>
<li data-icon="false"><a href="#map">Map</a></li>
<li data-role="list-divider">Categories</li>
<li><a href="#attractions">Attractions</a></li>
<li><a href="#attractions">Dining</a></li>
<li><a href="#attractions">Education</a></li>
<li><a href="#attractions">Events</a></li>
<li><a href="#attractions">Holy Places</a></li>
<li><a href="#attractions">Hospitals</a></li>
<li><a href="#attractions">Hotels</a></li>
<li><a href="#attractions">Shopping</a></li>
<li><a href="#attractions">Services</a></li>
<li><a href="#attractions">Transport</a></li>
</ul>
</div><!-- /panel -->
</div>
<!-- /responsive grid --- list of categories--> <!-- id attractions -->
<div data-role="page" id="nearby">
<div data-role="header" data-theme="b" data-position="fixed">
<h1>Attractions</h1>
<a href="#left-panel3" data-icon="grid" class="ui-btn-left">Menu</a>
<a href="#map" class="ui-btn ui-shadow ui-corner-all ui-icon-location ui-btn-icon-notext ui-btn-inline"></a>
</div><!-- /header -->
<div role="main" class="my-page ui-content jqm-fullwidth">
<ul data-role="listview" data-inset="true">
<li><a href="#LaMesaDam">
<img src="images/QuezonMemorialCircle.png" class="ui-li-thumb">
<h2>Quezon Memorial Circle</h2>
<p>at Quezon City</p>
<!--<p class="ui-li-aside">Windows Phone</p>-->
</a></li>
<li><a href="#LaMesaDam">
<img src="images/LaMesaDam.png" class="ui-li-thumb">
<h2>La Mesa Dam</h2>
<p>at Quezon City</p>
<!--<p class="ui-li-aside">iOS</p>-->
</a></li>
<li><a href="#LaMesaDam">
<img src="images/LaMesaEcoPark.png" class="ui-li-thumb">
<h2>La Mesa Eco Park</h2>
<p>at Quezon City</p>
<!--<p class="ui-li-aside">BlackBerry</p>-->
</a></li>
<li><a href="#LaMesaDam">
<img src="images/QuezonMemorialCircle.png" class="ui-li-thumb">
<h2>Quezon Memorial Circle</h2>
<p>at Quezon City</p>
<!--<p class="ui-li-aside">Windows Phone</p>-->
</a></li>
</ul>
</div><!-- /content -->
<!-- id nav-panel-->
<div data-role="panel" id="left-panel3" data-theme="b">
<ul data-role="listview" data-theme="b" data-divider-theme="b" data-inset="false">
<li data-icon="false"><a href="#home">Home</a></li>
<li data-icon="false"><a href="#attractions">Map</a></li>
<li data-role="list-divider">Categories</li>
<li><a href="#attractions">Attractions</a></li>
<li><a href="#attractions">Dining</a></li>
<li><a href="#attractions">Education</a></li>
<li><a href="#attractions">Events</a></li>
<li><a href="#attractions">Holy Places</a></li>
<li><a href="#attractions">Hospitals</a></li>
<li><a href="#attractions">Hotels</a></li>
<li><a href="#attractions">Shopping</a></li>
<li><a href="#attractions">Services</a></li>
<li><a href="#attractions">Transport</a></li>
</ul>
</div><!-- /panel -->
</div><!-- /page -->
<!-- MAP here -->
<div data-role="page" id="map" data-title="map" data-url="map">
<div data-role="header" data-theme="b" data-position="fixed">
<h1>Map</h1>
<!--<a href="#left-panel2" class="ui-btn ui-shadow ui-corner-all ui-icon-grid ui-btn-icon-notext ui-btn-inline"></a>-->
<a href="#left-panel4" data-icon="grid" class="ui-btn-left">Menu</a>
<a href="#map" class="ui-btn ui-shadow ui-corner-all ui-icon-location ui-btn-icon-notext ui-btn-inline"></a>
</div>
<div role="main" class="ui-content" id="map-canvas">
<!-- map loads here... -->
</div>
<!-- id nav-panel-->
<div data-role="panel" id="left-panel4" data-theme="b">
<ul data-role="listview" data-theme="b" data-divider-theme="b" data-inset="false">
<li data-icon="false"><a href="#home">Home</a></li>
<li data-icon="false"><a href="#map">Map</a></li>
<li data-role="list-divider">Categories</li>
<li><a href="#attractions">Attractions</a></li>
<li><a href="#attractions">Dining</a></li>
<li><a href="#attractions">Education</a></li>
<li><a href="#attractions">Events</a></li>
<li><a href="#attractions">Holy Places</a></li>
<li><a href="#attractions">Hospitals</a></li>
<li><a href="#attractions">Hotels</a></li>
<li><a href="#attractions">Shopping</a></li>
<li><a href="#attractions">Services</a></li>
<li><a href="#attractions">Transport</a></li>
</ul>
</div><!-- /panel -->
</div>
<!-- / MAP here -->
</body>
</html>
这里附上截图。
【问题讨论】：
-
尝试在浏览器中运行此页面并检查..
-
奇怪。 chrome 不允许跟踪我的位置
-
如果您在某处定义了规则
img {max-width: 100%; }，这可能是个问题。见Google Maps API V3 : weird UI display glitches (with screenshot) -
我尝试将 max-width 设置为 none 但仍然没有运气
-
你能链接到一个复制样本吗？我见过 jQuery-mobile 与 CSS 混用的情况，导致 Maps API 出现故障。
标签： javascript android google-maps cordova google-maps-api-3