Google Map API v3未完全加载
我想在我的phonegap应用中加入google map api v3。但是，它只是加载在屏幕的左上角。这是我的代码。
<!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>
这里附有截图。 
1 个答案:
答案 0 :(得分：0)
如果有机会，请考虑使用此插件。 此插件比Google Maps JavaScript API v3更快。
https://github.com/wf9a5m75/phonegap-googlemaps-plugin/
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？