0

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

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

1 回答 1

0

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

并且您需要防止表单导致页面重新加载（在 onsubmit 中返回 false）：

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

工作示例

于 2013-10-10T22:10:51.383 回答