续在 Distance between two locations
<html>
<head>
<script src="http://maps.googleapis.com/maps/api/js"></script>
<script type="text/javascript">
var directionsDisplay;
var directionsService;
var map;
function initialize()
{
directionsDisplay= new google.maps.DirectionsRenderer();
directionsService = new google.maps.DirectionsService();
var mapProp =
{
zoom: 7,
mapTypeId : google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById('textDirection'));
}
function showMap()
{
document.getElementById("googleMap").style.display = 'inline';
document.getElementById("textDirection").style.display = 'inline';
var start = document.getElementById('origin').value;
var end = document.getElementById('destination').value;
var directionsRequest =
{
origin : start,
destination : end,
travelMode : google.maps.TravelMode.DRIVING
}
directionsService.route(directionsRequest, function(response, status)
{
if(status === google.maps.DirectionsStatus.OK)
{
directionsDisplay.setDirections(response);
}
else
{
window.alert('Cannot');
}
});
}
function resetMap()
{
document.getElementById("origin").value = '';
document.getElementById("destination").value = '';
document.getElementById("googleMap").style.display = 'none';
document.getElementById("textDirection").style.display = 'none';
}
</script>
<style>
#textDirection{
width: 300px;
height: 60%;
float: right;
overflow-y: auto;
margin-top: 1%;
margin-right: 29%;
}
#googleMap{
width : 50%;
height : 60%;
top: 5%;
position : absolute;
margin-left: 5px;
}
</style>
</head>
<body onload="initialize()">
<form action="showmap1.php" method="post">
From: <input type="text" name="origin" id="origin" size="30" />
To:<input type="text" name="destination" id="destination" size="30" />
<input type="button" value="Search" onclick="showMap()" />
<input type="button" value="Reset" onclick="resetMap()" /><br />
<div id="googleMap"></div>
<div id="textDirection"></div>
</form>
</body>
</html>
从上面的代码，我有以下问题:
(1) JavaScript
当我运行上面的代码时，我得到如下图所示的输出:
灰色部分是显示的 map 。我想在第一次运行页面时隐藏它。我该如何修改？
(2) JavaScript
在搜索到正确的结果后，我现在尝试搜索一个空白的目的地。它显示下图:
但是，以前的 map 和路线与警报一起显示。我的预期输出仅显示没有 map 和路线的警报消息“不能”。我该如何修改？
(3) CSS
当我将网页放大到 120% 时，我的输出如下图所示:
天哪，我看不到路线。如果我越来越大地缩放我的网页，那就更糟了。为什么以及如何在 css 中修改它？
最佳答案
(1)
你应该把
var mapProp =
{
zoom: 7,
center: {lat: 62, lng: -110.0},
mapTypeId : google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
directionsDisplay.setMap(map);
进入 showMap() 函数。 map 不会在第一次加载页面时显示。它仅在您按下 Search 按钮时显示。
(2)
如果显示 Cannot 警报，隐藏 map 和路线如下:
if(status === google.maps.DirectionsStatus.OK)
{
directionsDisplay.setDirections(response);
}
else
{
document.getElementById("googleMap").style.display = 'none';
document.getElementById("textDirection").style.display = 'none';
window.alert('Cannot');
}
(3)
如果你使用float:right，不应该固定元素的width。如果元素的 width 大于屏幕，它会破坏您的布局。我不擅长CSS，你可以试试下面的代码。希望这有帮助^^
#textDirection{
width: 40%;
height: 60%;
float: right;
overflow-y: auto;
margin-top: 1%;
}
#googleMap{
width : 50%;
height : 60%;
top: 5%;
position : absolute;
margin-left: 5px;
}
更新:
要隐藏 map 并仅在需要时显示，请使用事件:
google.maps.event.trigger(map, "resize");
我已经更新了我的代码，请检查一下。我们只需要将 map 的 zoom smaller 设置为 1 并立即增加它:
google.maps.event.addListener(map, "idle", function(){
var center = map.getCenter();
google.maps.event.trigger(map, "resize");
map.setCenter(center);
});
map.setZoom( map.getZoom() - 1 );
map.setZoom( map.getZoom() + 1 );
关于javascript - 隐藏部分 map ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33097784/