양식을 제출하기 전에 거리를 계산하십시오.

직장에서 목적지까지의 거리를 계산하려고합니다. 3 개의 필드가있는 양식이 있습니다. 날짜 대상 거리 대상 주소를 입력하면됩니다.이 양식을 제출하기 전에 (최상의 사용자 경험을 위해)해야합니다. Google지도 API를 사용하려고하지만 대상 입력란에서 js 코드 var DestinationA에 입력을 가져올 수 없습니다. 나는 또한 제출하기 전에 inout을 얻기 위해 "onchange"를 사용하고있다.양식을 제출하기 전에 거리를 계산하십시오.

내 다음 단계는 거리 결과를 양식 필드 거리로 가져 오는 것입니다.

도움을 주시면 감사하겠습니다. '(

<%@LANGUAGE="VBSCRIPT" CODEPAGE="1252"%> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>test</title> 

    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script> 
    <style> 
     html, body { 
     height: 100%; 
     margin: 0; 
     padding: 0; 
     } 

     #map-canvas { 
    height: 200px; 
    width: 200px; 
    position: absolute; 
    left: 3px; 
    top: 92px; 
    z-index: 1; 
     } 
     #content-pane { 
     float:right; 
     width:48%; 
     padding-left: 2%; 
     } 
     #outputDiv { 
    font-size: 11px; 
    height: 50px; 
    width: 876px; 
    position: absolute; 
    left: 0px; 
     } 
    </style> 

</head> 

<script> 
var map; 
var geocoder; 
var bounds = new google.maps.LatLngBounds(); 
var markersArray = []; 

var origin1 = 'Gl. Hovedgade 10, Denmark'; 
// var destinationA = 'ballerup'; //THIS WORKS but I need the user input.... 

// var destinationA = document.form1.destination; //did not work 

// var addressField = document.getElementById('destination'); //did not work 
// var destinationA = addressField.value;  

// var destinationA = $("#destination").val();  //did not work 


var destinationIcon = 'https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=D|FF0000|000000'; 
var originIcon = 'https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=O|FFFF00|000000'; 

function initialize() { 
    var opts = { 
    center: new google.maps.LatLng(55.876, 12.5), 
    zoom: 15 
    }; 
    map = new google.maps.Map(document.getElementById('map-canvas'), opts); 
    geocoder = new google.maps.Geocoder(); 
} 

function calculateDistances() { 
    var service = new google.maps.DistanceMatrixService(); 
    service.getDistanceMatrix(
    { 
     origins: [origin1], 
     destinations: [destinationA], 
     travelMode: google.maps.TravelMode.DRIVING, 
     unitSystem: google.maps.UnitSystem.METRIC, 
     avoidHighways: false, 
     avoidTolls: false 
    }, callback); 
} 

function callback(response, status) { 
    if (status != google.maps.DistanceMatrixStatus.OK) { 
    alert('Error was: ' + status); 
    } else { 
    var origins = response.originAddresses; 
    var destinations = response.destinationAddresses; 
    var outputDiv = document.getElementById('outputDiv'); 
    outputDiv.innerHTML = ''; 
    deleteOverlays(); 

    for (var i = 0; i < origins.length; i++) { 
     var results = response.rows[i].elements; 
     addMarker(origins[i], false); 
     for (var j = 0; j < results.length; j++) { 
     addMarker(destinations[j], true); 
     outputDiv.innerHTML += 'Tegnestuen' + ' til ' + destinations[j] 
      + ': ' + results[j].distance.text; 
     } 
    } 
    } 
} 

function addMarker(location, isDestination) { 
    var icon; 
    if (isDestination) { 
    icon = destinationIcon; 
    } else { 
    icon = originIcon; 
    } 
    geocoder.geocode({'address': location}, function(results, status) { 
    if (status == google.maps.GeocoderStatus.OK) { 
     bounds.extend(results[0].geometry.location); 
     map.fitBounds(bounds); 
     var marker = new google.maps.Marker({ 
     map: map, 
     position: results[0].geometry.location, 
     icon: icon 
     }); 
     markersArray.push(marker); 
    } else { 
     alert('Geocode was not successful for the following reason: ' 
     + status); 
    } 
    }); 
} 

function deleteOverlays() { 
    for (var i = 0; i < markersArray.length; i++) { 
    markersArray[i].setMap(null); 
    } 
    markersArray = []; 
} 

google.maps.event.addDomListener(window, 'load', initialize); 

    </script> 


<body> 
    <div id="outputDiv"> 
     <form id="form1" name="form1" method="post" action=""> 
     date 
      <input name="date" type="text" value="" id="date"/> 
     destination 
     <input name="destination" type="text" value="" id="destination" onchange="calculateDistances();"/> 
     distance 
     <input name="distance" type="text" value="" id="distance" /> 
     </form> 
    </div> 
    <div id="map-canvas"></div> 
    </body> 
</html>

출처

2014-11-13 Jesper Kindt Larsen

당신은 document.getElementById를 액세스 할 수 없습니다 :

내 코드입니다 www.e-kl.dk/s/_kort.asp : 여기

내 테스트 사이트입니다 목적지 '). (필요할 때) 베스트는 calculateDistances 기능에서 그 값을 얻을 수 있습니다 :

function calculateDistances() { 

    var addressField = document.getElementById('destination'); //did not work 
    var destinationA = addressField.value; 
    var service = new google.maps.DistanceMatrixService(); 
    service.getDistanceMatrix({ 
     origins: [origin1], 
     destinations: [destinationA], 
     travelMode: google.maps.TravelMode.DRIVING, 
     unitSystem: google.maps.UnitSystem.METRIC, 
     avoidHighways: false, 
     avoidTolls: false 
    }, callback); 
}

working fiddle

출처

2014-11-13 17:52:40 geocodezip

감사합니다 - 이것은 첫 번째 부분 일했다. 이제 googles API에서 결과를 얻을 수 있지만 양식이 사라집니다. Google 출력 대신 거리 결과로 양식을 얻을 수있는 방법이 있습니까? –

지도에서 Origin 마커를 제거하고 특정 확대/축소 레벨에서 대상 마커를 표시 할 수 있습니까? –

스크립트에 의한 텍스트 출력을 텍스트 상자에 넣고 싶다면 [put it] (http://jsfiddle.net/t4nj38jo/1/)'var outputDiv = document.getElementById ('distance'); outputDiv.value + = 'Tegnestuen'+ 'til'+ 대상 [j] + ':'+ 결과 [j] .distance.text; ' – geocodezip

양식을 제출하기 전에 거리를 계산하십시오.

답변

관련 문제