Html 如何获取从设定点到输入点的方向_Html_Api_Google Maps

Html 如何获取从设定点到输入点的方向

html api google-maps

Html 如何获取从设定点到输入点的方向,html,api,google-maps,Html,Api,Google Maps,我对使用GoogleMapsAPI很陌生，但我已经成功地做到了，这样你可以输入两个位置，它会为你创建方向和方向列表然而，我试图使它，所以你有一个设定点（长/纬度）作为开始位置，你可以输入一个目的地，它将为你创建方向这就是我到目前为止所做的： <html> <head> <title>Directions to nearby places</title> <script type="text/javascript" src="https:/

我对使用GoogleMapsAPI很陌生，但我已经成功地做到了，这样你可以输入两个位置，它会为你创建方向和方向列表

然而，我试图使它，所以你有一个设定点（长/纬度）作为开始位置，你可以输入一个目的地，它将为你创建方向

这就是我到目前为止所做的：

<html>
<head>
<title>Directions to nearby places</title>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB_MBMV60nG7Il1CNnJbmBUPrQ2kCMihe0&libraries=places&callback=initMap">
</script>
<script type="text/javascript">

    var getDirections;
    var directionCalculator = new google.maps.DirectionsService();

    function initMap() {

        getDirections = new google.maps.DirectionsRenderer();
        var mySettings = {
            minZoomLevel: 20,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            mapTypeControl: false
        };
        var map = new google.maps.Map(document.getElementById("map"),mySettings);

        getDirections.setMap(map);
        getDirections.setPanel(document.getElementById("DirectionsList"));

    }

    function calcRoute() {
        var start = document.getElementById("Start").value;
        var end = document.getElementById("End").value;
        var request = {
            origin:start,
            destination:end,
            travelMode: google.maps.DirectionsTravelMode.WALKING
        };

        directionCalculator.route(request, function (response, status) {
            if (status == google.maps.DirectionsStatus.OK) {
                getDirections.setDirections(response);
            }
        });
    }

    </script>
    </head>

   <body onload="initMap()">
   <p id="Time"></p>
   `<h1>Plan Your route</h1>`
 <form>
    <input type="submit" value="Reset" onclick="Reset()">
</form>
<p>
    <form action="routeDescription" onsubmit="calcRoute();return false;" id="routeForm">

        <input type="text" id="Start" value="" placeholder="Start Location">
        <input type="text" id="End" value="" placeholder="Destination">
        <input type="submit" value="Preview route">

    </form>
</p>
<br>
<div id="map" style="height:75%"></div>
<p>
    Here is how to get to your location
</p>
<div id="DirectionsList"></div>

<script>
        function Reset() {
            location.reload();
        }

        function Time() {
        var date = new Date();
        var time = date.toLocaleTimeString();
            document.getElementById("Time").innerHTML = time;
    }
</script>
</body>
</html>


到附近地方的方向
var-getDirections；
var directionCalculator=new google.maps.directionservice（）；
函数initMap（）{
getDirections=new google.maps.DirectionsRenderer（）；
var mySettings={
minZoomLevel:20，
mapTypeId:google.maps.mapTypeId.ROADMAP，
mapTypeControl:false
};
var map=new google.maps.map（document.getElementById（“map”），mySettings）；
getDirections.setMap（map）；
setPanel（document.getElementById（“DirectionsList”）；
}
函数calcRoute（）{
var start=document.getElementById（“start”）.value；
var end=document.getElementById（“end”）.value；
var请求={
来源：start，
目的地:完，
travelMode:google.maps.Directions travelMode.WALKING
};
路由（请求、函数（响应、状态）{
if（status==google.maps.directionstatus.OK）{
getDirections.setDirections（响应）；
}
});
}

`规划你的路线`





以下是如何到达您的位置

函数重置（）{
location.reload（）；
}
功能时间（）{
变量日期=新日期（）；
var time=date.toLocaleTimeString（）；
document.getElementById（“Time”）.innerHTML=Time；
}

一种方法是为ID为“Start”的输入元素提供一个值，例如：

<input type="text" id="Start" value=" value="Main St, CA">

对于您的设定点：

var start = "Main St, CA" // or in coordinates

如果希望原点是（设备）的当前位置，可以使用navigator.geolocation.getCurrentPosition（）：

你的问题是什么？什么不起作用？嗨，目前我有两个输入框，用来输入关于起始位置和目的地的信息。我多么希望开始位置始终设置为某个位置。+您在实现这一点时遇到了什么麻烦？什么是“固定点”？

var start = "Main St, CA" // or in coordinates

navigator.geolocation.getCurrentPosition(function (location) {
console.log(location.coords.latitude); //here you have the value of lat
console.log(location.coords.longitude);//here you have the value of lng
//use them wisely
//more code
});