个人中心
gpt4 book ai didi

javascript - 两个地点之间的距离

转载 作者：行者123 更新时间：2023-11-30 12:13:28 25 4
gpt4 key购买 nike 

<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) 当我点击重置按钮时，我搜索另一个地方并点击搜索按钮。然而，谷歌地图和文字方向并不像下图那样显示。

enter image description here应该如何修改？

(2) 当我第二次搜索位置时，文本方向路线重复显示如下图。
enter image description here我应该如何让它只显示一次？

最佳答案

第一个问题:

因为你打过电话

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() 函数中调用。您可以在主体 onload() 上调用 initializeMap()。完整答案在这里:

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

关于javascript - 两个地点之间的距离，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33093318/

25 4 0
文章推荐： ios - 要从主应用程序发送到键盘扩展的图像
文章推荐： Objective-C 闭包已转换为 Swift，但不断重复运行，没有完成且没有错误
文章推荐： javascript - 如何修改程序以输出方程的总和
文章推荐： ios - 当应用程序已打开时，Segue 不执行快速操作(Xcode 9)
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com