【发布时间】：2015-05-10 00:00:32
【问题描述】：
各位朋友，我不知道我的地图 v3 出了什么问题，它拒绝加载。我在 android 中使用 webview 来加载它，但没有显示地图。它只显示按钮和文本字段。这是下面的代码。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Street View service</title>
<style>
html, body {
height: 100%;
margin: 0px;
padding: 0px
}
#mode{
height:5%;
width:60%
margin-left:0%;
margin-right:0%;
margin-top:5%;
margin-bottom:0%
}
#autocomplete {
font-size:11pt;
align:center;
width: 60%;
margin-left:35%;
margin-right:5%;
margin-top:1%;
margin-bottom:0%
}
#autocomplete1 {
font-size:11pt;
align:center;
width: 60%;
margin-left:35%;
margin-right:5%;
margin-top:1%;
margin-bottom:0%
}
#from {
margin-top:1%;
margin-left:0%;
margin-right:0%;
margin-bottom:0%
}
#to {
margin-top:1%;
margin-left:0%;
margin-right:0%;
margin-bottom:0%
}
#locationField {
margin-left:0%;
margin-right:0%;
margin-top:1%;
margin-bottom:0%
}
#locationField1 {
margin-left:0%;
margin-right:0%;
margin-top:1%;
margin-bottom:0%
}
#button {
align:center;
margin-top:1%;
margin-right:5%;
margin-bottom:0%;
margin-left:35%;
width:60%;
height:8%
}
#map-canvas {
margin-top:1%;
margin-right:0%;
margin-bottom:0%;
margin-left:0%;
width: 100%;
height: 30%
}
</style>
<link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true&libraries=places"></script>
<script>
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();
var chicago = new google.maps.LatLng(41.850033, -87.6500523);
var mapOptions = {
zoom:14,
center: chicago,
mapTypeId: google.maps.MapTypeId.ROADMAP,
streetViewControl: false
}
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
directionsDisplay.setMap(map);
}
function searchDirection() {
var start = document.getElementById("autocomplete").value;
var end = document.getElementById("autocomplete1").value;
var selectedMode = document.getElementById("mode").value;
var request = {
origin:start,
destination:end,
travelMode: google.maps.TravelMode.[selectedMode]
};
directionsService.route(request, function(result, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(result);
}
});
}
</script>
</head>
<body onload="initialize();">
<div id="text" style="width: 100%; height: 50%;">
<div>
<strong>Direction By : </strong>
<select id="mode" onchange="calcRoute();">
<option value="DRIVING">Driving</option>
<option value="WALKING">Walking</option>
<option value="BICYCLING">Bicycling</option>
<option value="TRANSIT">Transit</option>
</select>
</div>
<div id="locationField">
<strong id="from">From : </strong>
<input id="autocomplete" placeholder="Enter Starting Point"
onFocus="geolocate()" type="text"></input>
</div>
<div id="locationField1">
<strong id="to">To : </strong>
<input id="autocomplete1" placeholder="Enter Destination Point"
onFocus="geolocate()" type="text"></input>
</div>
<input id="button" type="button" name="test" value="Search" style=" font-size:12pt; background-color:#00FF00; color:#A9F5F2;" onclick="searchDirection()">
</div>
<div id="map-canvas"></div>
</body>
</html>
【问题讨论】：
-
这是一个错误类型：travelMode: google.maps.TravelMode.[selectedMode] 而不是 travelMode: google.maps.TravelMode[selectedMode] ？ [] 之前的点
-
是的，你说得对，我已经更正了，但地图仍然没有显示在我的屏幕上。你知道可能是什么原因吗？
-
codepen.io/anon/pen/pvOpmo 您的代码似乎可以正常工作，但我不确定用于调整大小和边缘元素的 % 是否是个好主意
-
谢谢，我再次测试它工作。关于使用 % 表示大小的问题，您建议我使用什么以及 % 有什么问题。请注意我对html和javascript不太熟悉
-
% 需要一个通过高度甚至宽度设置大小的父级，只有 html 和绝对/固定定位标签将使用视口的大小作为参考。如果没有来自父级的引用，则变为：X% of null = nothing 垂直边距和填充使用父级宽度作为参考。
标签： javascript android html css google-maps