Google地图的html代码无法正常工作 [英] html code for Google Maps not working properly
本文介绍了Google地图的html代码无法正常工作的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我刚学习如何在我的代码中使用Google地图，但我无法让实际地图出现在浏览器屏幕上。所有出现的是两个下拉框，允许用户选择他们的开始和结束位置。
$ b Directions.html
<！DOCTYPE html>
< html xmlns =http://www.w3.org/1999/xhtml>
< head>
< meta name =viewportcontent =initial-scale = 1.0，user-scalable = no>
< meta charset =utf-8>
< title> Google Maps JavaScript API v3示例：路线简单< / title>
< link href =/ maps / documentation / javascript / examples / default.css =stylesheet>
< script src =https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false>< / script>
< script>
var directionDisplay;
var directionsService = new google.maps.DirectionsService（）;
var map;
函数initialize（）{
directionsDisplay = new google.maps.DirectionsRenderer（）;
var chicago = new google.maps.LatLng（41.850033，-87.6500523）;
var mapOptions = {
zoom：7，
mapTypeId：google.maps.MapTypeId.ROADMAP，
center：chicago
}
map = new google .maps.Map（document.getElementById（'map-canvas'），mapOptions）;
directionsDisplay.setMap（map）;
}
函数calcRoute（）{
var start = document.getElementById（'start'）。value;
var end = document.getElementById（'end'）。value;
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）;
}
}）;
}
< / script>
< / head>
< body onload =initialize（）>
< div>
< b>开始：< / b>
< select id =startonchange =calcRoute（）;>
< option value =chicago，il>芝加哥< / option>
< option value =st louis，mo>圣路易斯< / option>
< option>选项值=joplin，mo> Joplin，MO< / option>
< option value =oklahoma city，ok>俄克拉何马城< / option>
< option value =amarillo，tx> Amarillo< / option>
< option value =gallup，nm>盖洛普，NM< / option>
< option value =flagstaff，az> Flagstaff，AZ< / option>
< option>选项值=winona，az> Winona< / option>
< option>选项值=barstow，ca>巴斯托< / option>
< option value =san bernardino，ca>圣贝纳迪诺< / option>
< option value =los angeles，ca>洛杉矶< / option>
< / select>
< b>结束：< / b>
< select id =endonchange =calcRoute（）;>
< option value =chicago，il>芝加哥< / option>
< option value =st louis，mo>圣路易斯< / option>
< option>选项值=joplin，mo> Joplin，MO< / option>
< option value =oklahoma city，ok>俄克拉何马城< / option>
< option value =amarillo，tx> Amarillo< / option>
< option value =gallup，nm>盖洛普，NM< / option>
< option value =flagstaff，az> Flagstaff，AZ< / option>
< option>选项值=winona，az> Winona< / option>
< option>选项值=barstow，ca>巴斯托< / option>
< option value =san bernardino，ca>圣贝纳迪诺< / option>
< option value =los angeles，ca>洛杉矶< / option>
< / select>
< / div>
< div id =map-canvasstyle =top：30px;>< / div>
< / body>
< / html>
解决方案
这个文件是设置地图div的大小在你从下面复制的例子中：
/maps/documentation/javascript/examples/default.css
其中包含：
html，body {
height：100％;
保证金：0;
padding：0;
}
＃map-canvas，#map_canvas {
height：100％;
}
@media print {
html，body {
height：auto;
}
#map_canvas {
height：650px;
$ b $ p
$ b 它不存在于你的服务器上，在那里，把内容复制到你的HTML文件（在< style> 标签内），或者链接到Google服务器上的文件（不推荐，因为它可能会改变，但它会使地图显示出来）。
I'm just learning how to use google maps in my code, but I'm having trouble getting the actual map to appear on the browser screen. All that appears are the two drop down boxes that allows the user to choose their starting and ending locations. Any help would be greatly appreciated!
Directions.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Google Maps JavaScript API v3 Example: Directions Simple</title>
<link href="/maps/documentation/javascript/examples/default.css" rel="stylesheet">
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
var directionDisplay;
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:7,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: chicago
}
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
directionsDisplay.setMap(map);
}
function calcRoute() {
var start = document.getElementById('start').value;
var end = document.getElementById('end').value;
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);
}
});
}
</script>
</head>
<body onload="initialize()">
<div>
<b>Start: </b>
<select id="start" onchange="calcRoute();">
<option value="chicago, il">Chicago</option>
<option value="st louis, mo">St Louis</option>
<option value="joplin, mo">Joplin, MO</option>
<option value="oklahoma city, ok">Oklahoma City</option>
<option value="amarillo, tx">Amarillo</option>
<option value="gallup, nm">Gallup, NM</option>
<option value="flagstaff, az">Flagstaff, AZ</option>
<option value="winona, az">Winona</option>
<option value="kingman, az">Kingman</option>
<option value="barstow, ca">Barstow</option>
<option value="san bernardino, ca">San Bernardino</option>
<option value="los angeles, ca">Los Angeles</option>
</select>
<b>End: </b>
<select id="end" onchange="calcRoute();">
<option value="chicago, il">Chicago</option>
<option value="st louis, mo">St Louis</option>
<option value="joplin, mo">Joplin, MO</option>
<option value="oklahoma city, ok">Oklahoma City</option>
<option value="amarillo, tx">Amarillo</option>
<option value="gallup, nm">Gallup, NM</option>
<option value="flagstaff, az">Flagstaff, AZ</option>
<option value="winona, az">Winona</option>
<option value="kingman, az">Kingman</option>
<option value="barstow, ca">Barstow</option>
<option value="san bernardino, ca">San Bernardino</option>
<option value="los angeles, ca">Los Angeles</option>
</select>
</div>
<div id="map-canvas" style="top:30px;"></div>
</body>
</html>
解决方案 This file is what sets the size of the map div in the example you copied from:
/maps/documentation/javascript/examples/default.css
Which contains:
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map-canvas, #map_canvas {
height: 100%;
}
@media print {
html, body {
height: auto;
}
#map_canvas {
height: 650px;
}
}
It doesn't exist on your server, either copy it there, copy the content into your HTML file (inside <style> tags), or link to the file on Google's servers (not recommended, as it might change, but it will make the map show up).
这篇关于Google地图的html代码无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
