兩個地點之間的距離

Question

<html>
<head>
<script src="http://maps.googleapis.com/maps/api/js"></script>
<script type="text/javascript">
function showMap()
{
    var directionsDisplay = new google.maps.DirectionsRenderer();
    var directionsService = new google.maps.DirectionsService();
    var map;

    var mapProp = 
    {
        mapTypeId : google.maps.MapTypeId.ROADMAP
    };

    map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
    directionsDisplay.setMap(map);
    directionsDisplay.setPanel(document.getElementById('textDirection'));

    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: 62%;
float: right;
overflow-y: auto;
margin-top: 1%;
margin-right: 29%;
}

#googleMap{
width : 50%;
height : 60%;
position : absolute;
top: 60px;
margin-left: 5px;
}
</style>
</head>

<body>
<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()" />
<div id="googleMap"></div>
<div id="textDirection"></div>
</form>
</body>
</html>

從上面的代碼，我有以下問題：
（1）當我單擊“重置”按鈕時，我搜索另一個地方並單擊“搜索”按鈕。 但是，谷歌地圖和文字方向不會顯示如下圖所示。

我應該如何修改它？

（2）當我第二次搜索位置時，文本方向路徑重復顯示如下圖所示。
我怎么才能讓它只顯示一次？

Answer 1

第一個問題：

因為你打過電話

document.getElementById("googleMap").style.display = 'none';
document.getElementById("textDirection").style.display = 'none';

所以它不會在下次顯示。 你需要在showMap()設置元素顯示。 例如：

function showMap()
{
    document.getElementById("googleMap").style.display = 'inline';
    document.getElementById("textDirection").style.display = 'inline';
    ......
}

第二個問題：

你需要打電話

directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById('textDirection'));

在函數initializeMap() ，不應該在showMap()函數中調用。 你可以在body onload()上調用initializeMap() onload() 。 完整的答案在這里：

 <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, center: {lat: 41.85, lng: -87.65}, 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: 62%; float: right; overflow-y: auto; margin-top: 1%; margin-right: 29%; } #googleMap{ width : 50%; height : 60%; position : absolute; top: 60px; 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()" /> <div id="googleMap"></div> <div id="textDirection"></div> </form> </body> </html>

Answer 2

如果我理解了您的問題，那么您正在執行多次搜索，並希望DirectionsRenderer在每次搜索時都有一個清晰的平板。 您應該能夠刪除地圖並創建一個新實例以附加到div

if(status === google.maps.DirectionsStatus.OK)
{
    // clear the directionsDisplay
    directionsDisplay.setMap(null);
    directionsDisplay = new google.maps.DirectionsRenderer();
    directionsDisplay.setPanel(document.getElementById('textDirection'));

    directionsDisplay.setDirections(response);          
}
else
{
    window.alert('Cannot'); 
}

兩個地點之間的距離

問題描述

2 個解決方案

解決方案1
2 已采納 2015-10-13 03:58:21

解決方案2
1 2015-10-13 03:10:51

兩個地點之間的距離

問題描述

2 個解決方案

解決方案1 2 已采納 2015-10-13 03:58:21

解決方案2 1 2015-10-13 03:10:51

解決方案1
2 已采納 2015-10-13 03:58:21

解決方案2
1 2015-10-13 03:10:51