隐藏部分地图

继续。在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" />&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
当我搜索到正确的结果后，现在我尝试搜索空白目标。它显示下面的图像：

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

（3）CSS
当我放大我的网页到120％，我的输出类似下面的图片：
哦，我的上帝，我看不到路。如果我把我的网页放大和缩小，情况会更糟糕。为什么以及如何在css中修改它？

来源

2015-10-13 KKL Michael

（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）

如果您的UE 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

来源

2015-10-14 02:24:22

尼斯......我有一个季度的问题。我尝试你的小提琴，我仍然看到地图和路线与警报（“不能”）。 –

不错^^...但这次地图不能显示你最新的提琴的方向... –

你能再次检查吗？我仍然展示它。 –

如果你正在寻找使用谷歌地图API，这里是使用功能：注意：您必须添加&库=几何到你的脚本源

找到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/

来源

2015-10-13 08:38:52 Arun

隐藏部分地图

回答

相关问题