两个位置之间的距离 [英] Distance between two locations

问题描述

 < HTML> 
< head> 
< script src =http://maps.googleapis.com/maps/api/js>< / script> 
< script type =text / javascript> 
函数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（'Can not'）; 
} 
}）; 
} 
 
函数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; 
身高：62％; 
 float：right; 
 overflow-y：auto; 
 margin-top：1％; 
保证金率：29％; 
} 
 
 #googleMap {
 width：50％; 
身高：60％; 
位置：绝对; 
 top：60px; 
 margin-left：5px; 
} 
< / style> 
< / head> 
 
< body> 
< form action =showmap1.phpmethod =post> 
来自：< input type =textname =originid =originsize =30/>& nbsp; 
收件人：< input type =textname =destinationid =destinationsize =30/> 
< input type =buttonvalue =Searchonclick =showMap（）/> 
< input type =buttonvalue =Resetonclick =resetMap（）/> 
< div id =googleMap>< / div> 
< div id =textDirection>< / div> 
< / form> 
< / body> 
< / html> 
  

从上面的代码，我有以下问题：
（1）When我点击重置按钮，我搜索另一个地方，然后单击搜索按钮。然而，谷歌地图和文字方向并不像下图所示。



我该如何修改它（2）当我第二次搜索位置时，文本方向路径被重复显示，如下图所示。


我应该如何让它只显示一次？ 因为您曾经叫过

  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 （地图）; 
 directionsDisplay.setPanel（document.getElementById（'textDirection'））; 
  

函数 initializeMap（），should没有在 showMap（）函数中调用。你可以在body onload（）上调用 initializeMap（）。完整答案在这里：

maps / api / js>< / script>< script type =text / javascript> var directionsDisplay; var directionsService; var map;函数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（地图）; directionDisplay.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（'Can not'）;}}）;} 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.phpmethod =post> From：< input type =textname =originid =origin size =30/>& nbsp;收件人：< input type =textname =destinationid =destinationsize =30/>< input type =buttonvalue =搜索onclick =showMap（）/>< input type =buttonvalue =Resetonclick =resetMap（）/>< div id =googleMap>< div>< div id =textDirection>< / div>< / form>< / body>< / html>

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

From above code, I have following question:
(1) When I clicked Reset button, I search another place and click Search button. However, the google map and text direction doesn't show like the below image.

How should I modify it?

(2) When I search the location 2nd time, the text direction route are duplicated show like below image.
How should I make it only show once?

解决方案

First Question:

Because you had called

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

so it will not displayed in the next time. you need to set element display in showMap(). Ex:

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

Second Question:

You need to call

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

in a function initializeMap(), should not called in showMap() function. You could call initializeMap() on body onload(). Full answer is here:

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

这篇关于两个位置之间的距离的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！