Google map api v3 显示半张地图？
Posted
技术标签:
【中文标题】Google map api v3 显示半张地图？【英文标题】：Google map api v3 shows half a map? 【发布时间】：2013-07-10 08:41:05 【问题描述】：我在 Jquery Mobile 中做一个项目，但遇到了 Google API 的问题。当我从不同的页面导航到 MapPage 时，MapPage 本身会显示地图 OK，但是当从 HomePage 移动到 MapPage 时，它只显示地图的一半。如果我手动刷新或调整地图大小，它会修复它 - 但我已经尝试了 map.resize() 没有运气，所以我需要一个不同的解决方案。
我在下面附上了我的 HomePage 和 MapPage 的 html 代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="description" content="Project - Mobile" />
<meta name="author" content="Yuval Vardi" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>RentAcar</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="JS/jquery-2.0.2.js"></script>
<script src="JS/jquery.mobile-1.3.1.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script src="JS/mapScript.js" > </script>
</head>
<body>
<div id="HomePage" data-role="page" data-add-back-btn="true">
<div data-role="header">
</div>
<div data-role="content">
<a href="#calculate" data-role="button" data-theme="b" data-icon="gear" data-iconpos="top">Trip Info</a>
</div>
<div data-role="footer" class="mainFooter">
<h2> © Copyright Yuval Vardi </h2>
<p class="yearNow"> </p>
</div>
</div>
<div id="calculate" data-role="page" data-add-back-btn="true">
<div data-role="header">
</div>
<div data-role="content">
<table id="mapTable">
<tr>
<td>
<p>Pickup location</p>
</td>
<td></td>
<td>
<p>Where do you go?</p>
</td>
</tr>
<tr>
<td>
<input id="startInput" type="text" value="" placeholder="Start location" />
</td>
<td></td>
<td>
<input type="text" id="end" placeholder="Return location"/>
</td>
</tr>
<tr>
<td data-role="controlgroup">
<button id="myLocation" onclick="getMarker()" data-role="button" data-theme="e" > Find me </button>
</td>
<td></td>
<td data-role="controlgroup">
<button onclick="calcRoute()" data-theme="b" > Calculate rout </button>
</td>
</tr>
<tr>
<td colspan="3">
<div id="map-canvas" style="width:400px; height:280px;">
</div>
</td>
</tr>
</table>
</div>
<div data-role="footer" class="mainFooter">
<h2> © Copyright Yuval Vardi </h2>
<p class="yearNow"> </p>
<a class="ui-btn-right" href="#HomePage" data-role="button" data-icon="home" data-iconpos="top" >Home</a>
</div>
</div>
</body></html>
我的 javascript 文件：
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
function initialize()
directionsDisplay = new google.maps.DirectionsRenderer();
var israel = new google.maps.LatLng(32.0938254, 34.7786934); // the var for our initial point
var mapOptions =
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: israel // where to center the map on initial!
;
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
directionsDisplay.setMap(map);
function calcRoute()
initialize();
var start = document.getElementById('startInput').value;
var end = document.getElementById('end').value;
var distanceInput = document.getElementById("distance");
var request =
origin: start,
destination: end,
travelMode: google.maps.DirectionsTravelMode.DRIVING
;
directionsService.route(request, function (response, status)
if (status == google.maps.DirectionsStatus.OK)
directionsDisplay.setDirections(response);
distanceInput.value = response.routes[0].legs[0].distance.value / 1000;
);
google.maps.event.addDomListener(window, 'load', initialize);
function getMarker()
if (navigator.geolocation)
navigator.geolocation.getCurrentPosition(showPosition,showError);
function showPosition(position)
var lat=position.coords.latitude;
var long=position.coords.longitude;
marker(lat,long); //calls the marker function
function showError(error)
alert ("Error loading map");
function marker(lat,long)
var myLatlng = new google.maps.LatLng(lat,long);
var mapOptions =
zoom: 12,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
;
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
$("#startInput").attr("value",myLatlng);
var marker = new google.maps.Marker(
position: myLatlng,
map: map,
title:"You are Here!"
);
【问题讨论】：
【参考方案1】：地图 div 的宽度为零。要使用百分比宽度，您必须定义其所有父元素的宽度（或至少达到可用于计算宽度的固定大小元素）。
见Mike Williams' Google Maps API v2 tutorial page on percentage sizing
【讨论】：
更改为固定宽度：400px 并尝试为所有父母添加宽度 - 仍然无法正常工作。 查看本帖回复：link【参考方案2】：您需要调用 checkResize() API 函数。像这样：
map = new google.maps.Map(document.getElementById("map"), mapOptions);
map.checkResize()
这个对我也有用
【讨论】：
TypeError: undefined is not a function (-1)以上是关于Google map api v3 显示半张地图？的主要内容，如果未能解决你的问题，请参考以下文章
Google Maps API V3：奇怪的 UI 显示故障（附截图）
google maps js v3 api教程 -- 创建infowindow