Question

我希望从我的页面中的输入元素获取纬度和经度，并在地图上的两个地方之间显示方向。我编写代码，提供所需的变量并设置origin＆amp;目的地请求显示方向，但我给出错误，说明原始和目的地的未定义输入，我没有在地图上看到任何方向。

<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);
}
});
}

Answer 1

我收到错误：getrout未定义。

你需要阻止表单导致页面重新加载（在onsubmit中返回false）：

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

working example

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

1 个答案: