隐藏部分地图答案

【问题标题】：Hide part of map隐藏部分地图
【发布时间】：2016-01-10 21:58:26
【问题描述】：

<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" />&nbsp;
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
当我运行上面的代码时，我得到如下图所示的输出：

灰色部分是显示的地图。我想在第一次运行页面时隐藏它。我应该如何修改它？

(2) JavaScript
在我搜索到正确的结果后，现在我尝试搜索一个空白的目的地。它显示了下图：

但是，之前的地图和路线会与警报一起显示。我的预期输出仅显示没有地图和路线的警报消息“不能”。我应该如何修改它？

(3) CSS
当我将网页放大到 120% 时，我的输出如下图所示：
天哪，我看不到路线。如果我把我的网页放大得越来越大，那就更糟糕了。为什么以及如何在 css 中修改它？

【问题讨论】：

标签： javascript html css google-maps-api-3

【解决方案1】：

(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() 函数。地图在第一次加载页面时不会显示。它仅在您按下Search 按钮时显示。

(2)

如果显示Cannot警报，隐藏地图和路线如下：

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; 
}

更新：

要隐藏地图并仅在需要时显示，请使用事件：

google.maps.event.trigger(map, "resize");

我已经更新了我的代码，请检查一下。我们只需要将地图的缩放设置为小于 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 );

Here is updated answer

【讨论】：

很好...我有一个关于 Q2 的问题。我试试你的小提琴，我仍然可以看到地图和路线以及警报（“Cannot”）。
不错 ^^...但是这次地图无法显示您最新小提琴的方向...
@KKLMichael：我已经更新了答案，希望对您有所帮助
非常非常好^^...你解决了我的问题...我会理解你的代码并学习jQuery...下次如果我有问题我会找你.. .

【解决方案2】：

如果您希望使用 google maps API，请使用以下函数：注意：您必须将 &libraries=geometry 添加到您的脚本源

在Google Maps - How to get the distance between two point in metre?中查找

var p1 = new google.maps.LatLng(45.463688, 9.18814);
var p2 = new google.maps.LatLng(46.0438317, 9.75936230000002);

alert(calcDistance(p1, p2));

//calculates distance between two points in km's
function calcDistance(p1, p2){
  return (google.maps.geometry.spherical.computeDistanceBetween(p1, p2) / 1000).toFixed(2);
}

}

你也可以像这样使用

   var location1 = new google.maps.LatLng(42.3584308, -71.0597732);
      var location2 = new google.maps.LatLng(42.348805455204214, -71.07485794349975);

      var map;
      var mapOptions = { center: new google.maps.LatLng(0.0, 0.0), zoom: 2,
        mapTypeId: google.maps.MapTypeId.ROADMAP };

      function initialize() {
        map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
      directionsService = new google.maps.DirectionsService();
      directionsDisplay = new google.maps.DirectionsRenderer(
      {
      suppressMarkers: true,
      suppressInfoWindows: true
      });
      directionsDisplay.setMap(map);
      var request = {
      origin: location1, 
      destination:location2,
      travelMode: google.maps.DirectionsTravelMode.DRIVING
      };
      directionsService.route(request, function(response, status) 
      {
      if (status == google.maps.DirectionsStatus.OK) 
      {
      directionsDisplay.setDirections(response);
      //alert("the distance: " + response.routes[0].legs[0].distance.text);
      distance = "The distance between the two points on the chosen route is: "+response.routes[0].legs[0].distance.text;
      //distance += "<br/>The aproximative driving time is: "+response.routes[0].legs[0].duration.text;
      document.getElementById("distance").innerHTML = distance;
      }
      });

      // show a line between the two points
      var line = new google.maps.Polyline({
      map: map, 
      path: [location1, location2],
      strokeWeight: 7,
      strokeOpacity: 0.8,
      strokeColor: "#FFAA00"
      });
      }

      google.maps.event.addDomListener(window, 'load', initialize);

小提琴链接http://jsfiddle.net/39KKu/

【讨论】：