Fatal编程技术网
  • javascript/
  • Javascript 两个位置之间的距离 函数showMap（） { var directionsDisplay=new google.maps.DirectionsRenderer（）； var directionsService=new google.maps.directionsService（）； var映射； var mapProp= { mapTypeId:google.maps.mapTypeId.ROADMAP }; map=new google.maps.map（document.getElementById（“googleMap”），mapProp）； 方向显示.setMap（地图）； directionsDisplay.setPanel（document.getElementById（'textDirection'）； var start=document.getElementById（'origin'）。值； var end=document.getElementById（'destination'）。值； 变量方向请求= { 来源：start， 目的地:完， travelMode:google.maps.travelMode.DRIVING } 路由（DirectionRequest，函数（响应，状态） { if（status==google.maps.directionstatus.OK） { 方向显示。设置方向（响应）； } 其他的 { window.alert（'Cannot'）； } }); } 函数resetMap（） { document.getElementById（“origin”）。值=“”； document.getElementById（“目的地”）。值=“”； document.getElementById（“googleMap”）.style.display='none'； document.getElementById（“textDirection”）.style.display='none'； } #文本方向{ 宽度：300px； 身高：62%； 浮动：对； 溢出y：自动； 利润率最高：1%； 保证金权利：29%； } #谷歌地图{ 宽度：50%； 身高：60%； 位置：绝对位置； 顶部：60px； 左边距：5px； } 发件人： 致：

Javascript 两个位置之间的距离 函数showMap（） { var directionsDisplay=new google.maps.DirectionsRenderer（）； var directionsService=new google.maps.directionsService（）； var映射； var mapProp= { mapTypeId:google.maps.mapTypeId.ROADMAP }; map=new google.maps.map（document.getElementById（“googleMap”），mapProp）； 方向显示.setMap（地图）； directionsDisplay.setPanel（document.getElementById（'textDirection'）； var start=document.getElementById（'origin'）。值； var end=document.getElementById（'destination'）。值； 变量方向请求= { 来源：start， 目的地:完， travelMode:google.maps.travelMode.DRIVING } 路由（DirectionRequest，函数（响应，状态） { if（status==google.maps.directionstatus.OK） { 方向显示。设置方向（响应）； } 其他的 { window.alert（'Cannot'）； } }); } 函数resetMap（） { document.getElementById（“origin”）。值=“”； document.getElementById（“目的地”）。值=“”； document.getElementById（“googleMap”）.style.display='none'； document.getElementById（“textDirection”）.style.display='none'； } #文本方向{ 宽度：300px； 身高：62%； 浮动：对； 溢出y：自动； 利润率最高：1%； 保证金权利：29%； } #谷歌地图{ 宽度：50%； 身高：60%； 位置：绝对位置； 顶部：60px； 左边距：5px； } 发件人： 致：

javascript html google-maps-api-3

Javascript 两个位置之间的距离 函数showMap（） { var directionsDisplay=new google.maps.DirectionsRenderer（）； var directionsService=new google.maps.directionsService（）； var映射； var mapProp= { mapTypeId:google.maps.mapTypeId.ROADMAP }; map=new google.maps.map（document.getElementById（“googleMap”），mapProp）； 方向显示.setMap（地图）； directionsDisplay.setPanel（document.getElementById（'textDirection'）； var start=document.getElementById（'origin'）。值； var end=document.getElementById（'destination'）。值； 变量方向请求= { 来源：start， 目的地:完， travelMode:google.maps.travelMode.DRIVING } 路由（DirectionRequest，函数（响应，状态） { if（status==google.maps.directionstatus.OK） { 方向显示。设置方向（响应）； } 其他的 { window.alert（'Cannot'）； } }); } 函数resetMap（） { document.getElementById（“origin”）。值=“”； document.getElementById（“目的地”）。值=“”； document.getElementById（“googleMap”）.style.display='none'； document.getElementById（“textDirection”）.style.display='none'； } #文本方向{ 宽度：300px； 身高：62%； 浮动：对； 溢出y：自动； 利润率最高：1%； 保证金权利：29%； } #谷歌地图{ 宽度：50%； 身高：60%； 位置：绝对位置； 顶部：60px； 左边距：5px； } 发件人： 致：,javascript,html,google-maps-api-3,Javascript,Html,Google Maps Api 3,从上面的代码中，我有以下问题： （1） 当我单击“重置”按钮时，我搜索另一个位置并单击“搜索”按钮。但是，谷歌地图和文本方向与下图不同。 我应该如何修改它 （2） 当我第二次搜索位置时，文本方向路线重复，如下图所示。 我该如何让它只显示一次 如果我理解您的问题，您正在执行多个搜索，并且希望DirectionsRenderer在每次搜索时都有一个干净的记录。您应该能够删除映射并创建新实例以附加到div <html> <head> <script src="http:/

从上面的代码中，我有以下问题：
（1） 当我单击“重置”按钮时，我搜索另一个位置并单击“搜索”按钮。但是，谷歌地图和文本方向与下图不同。

我应该如何修改它

（2） 当我第二次搜索位置时，文本方向路线重复，如下图所示。
我该如何让它只显示一次

如果我理解您的问题，您正在执行多个搜索，并且希望DirectionsRenderer在每次搜索时都有一个干净的记录。您应该能够删除映射并创建新实例以附加到div

<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>
第一个问题：

因为你打过电话

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'); 
}
所以下次不会显示。您需要在
showMap（）
中设置元素显示。例：

document.getElementById("googleMap").style.display = 'none';
document.getElementById("textDirection").style.display = 'none';
第二个问题：

你需要打电话

function showMap()
{
    document.getElementById("googleMap").style.display = 'inline';
    document.getElementById("textDirection").style.display = 'inline';
    ......
}
在函数
initializeMap（）
中，不应在
showMap（）函数中调用。您可以在body
onload（）上调用
initializeMap（）
。完整答案如下：




var方向显示；
var定向服务；
var映射；
函数初始化（）
{    
directionsDisplay=new google.maps.DirectionsRenderer（）；
directionsService=new google.maps.directionsService（）；
var mapProp=
{
缩放：7，
中心：{lat:41.85，lng:-87.65}，
mapTypeId:google.maps.mapTypeId.ROADMAP
};
map=new google.maps.map（document.getElementById（“googleMap”），mapProp）；
方向显示.setMap（地图）；
directionsDisplay.setPanel（document.getElementById（'textDirection'）；
}
函数showMap（）
{
document.getElementById（“googleMap”）.style.display='inline'；
document.getElementById（“textDirection”）.style.display='inline'；
var start=document.getElementById（'origin'）。值；
var end=document.getElementById（'destination'）。值；
变量方向请求=
{
来源：start，
目的地:完，
travelMode:google.maps.travelMode.DRIVING
}
路由（DirectionRequest，函数（响应，状态）
{
if（status==google.maps.directionstatus.OK）
{
方向显示。设置方向（响应）；
}
其他的
{
window.alert（'Cannot'）；
}
});
}
函数resetMap（）
{
document.getElementById（“origin”）。值=“”；
document.getElementById（“目的地”）。值=“”；
document.getElementById（“googleMap”）.style.display='none'；
document.getElementById（“textDirection”）.style.display='none'；
}  
#文本方向{
宽度：300px；
身高：62%；
浮动：对；
溢出y：自动；
利润率最高：1%；
保证金权利：29%；
}
#谷歌地图{
宽度：50%；
身高：60%；
位置：绝对位置；
顶部：60px；
左边距：5px；
}
发件人：
致：



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