无法使用输入变量设置起点和目的地

can not set origin and destination with input variable

本文关键字：设置 起点 目的地 变量 输入      更新时间：2023-09-26

我想从页面中的输入元素获取纬度和经度，并在地图上显示两个地方之间的方向。 我编写的代码提供所需的变量并在请求中设置起点和目的地以显示方向，但我给出的错误是原点和目的地的未定义输入，并且我在地图上看不到任何方向。

<form id="direct" onsubmit="getrout();">
    <div id="start">
        START&nbsp;:<br />
            latitude1:&nbsp;&ensp;<input type="text" name="lat1" class="ff" id="l1"/><br />
            longitude1:<input type="text" name="lon1" class="ff" id="ln1"/>
    </div>  <br />
    <div id="end">
        END&nbsp;:<br />
        latitude2:&nbsp;&ensp;<input type="text" name="lat2" class="ff" id="l2"/><br />
        longitude2:<input type="text" name="lon2" class="ff" id="ln2"/>
    </div><br />
    <input type="submit" value="submit"/>
</form>

这是我的函数：

var map;
var infoWindow;
var requieUrl;
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
function load() {
var noPOILabels = [
{ 
  featureType: "poi", 
  elementType: "labels", 
  stylers: [ { visibility: "off" } ] 
}
 ];
var noPOIMapType = new google.maps.StyledMapType(noPOILabels,
{name: "NO POI"});
directionsDisplay = new google.maps.DirectionsRenderer();
   map = new google.maps.Map(document.getElementById("mapdiv"), {
    center: new google.maps.LatLng(47.614139556884766, -122.313240051269530),
    zoom: 13,
    mapTypeControlOptions: {
    mapTypeId: [google.maps.MapTypeId.ROADMAP,'no_poi']}
  });
   directionsDisplay.setMap(map);
}
function getroute(){
        var latitude1=document.getElementById('l1').value;
        var longitude1=document.getElementById('ln1').value;
        var latitude2=document.getElementById('l2').value;
        var longitude2=document.getElementById('ln2').value;
        var start=new google.maps.LatLng(latitude1,longitude1);
        var end=new google.maps.LatLng(latitude2,longitude2);
        var request={
            origin: start,
            destination:end,
            travelMode: google.maps.DirectionsTravelMode.DRIVING
        };
         directionsService.route(request, function(response, status) {  
if (status == google.maps.DirectionsStatus.OK) {
  directionsDisplay.setDirections(response);
}
});
}

我得到一个错误：getrout 未定义。

并且您需要防止表单导致页面重新加载(在提交时返回 false(：

<form id="direct" onsubmit="getroute();return false;">

工作示例

相关文章：