Сопоставление значений с функцией после события Click

Я пытаюсь реализовать поля текстового поиска в API Google Адресов, я создал текстовые поля, а также событие click, которое приводит к функции calcRoute(). У меня возникли проблемы с установкой в текстовых полях переменной «start» и «end» (по крайней мере, я думаю, что это проблема). Может кто-нибудь мне помочь? Список направлений должен появиться справа от карты.Сопоставление значений с функцией после события Click

<!DOCTYPE html> 
    <html> 
    <head> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
    <meta charset="utf-8"> 
    <title>Displaying text directions with <code>setPanel()</code></title> 
    <style> 
     html, body, #map-canvas { 
     height: 80%%; 
     margin: 0px; 
     padding: 0px 
     } 
     #panel { 
     position: absolute; 
     top: 5px; 
     left: 50%; 
     margin-left: -180px; 
     z-index: 5; 
     background-color: #fff; 
     padding: 5px; 
     border: 1px solid #999; 
     } 
    </style> 
    <style> 
     #directions-panel { 
     height: 80%%; 
     float: right; 
     width: 390px; 
     overflow: auto; 
     } 

     #map-canvas { 
     margin-right: 400px; 
     } 

     #control { 
     background: #fff; 
     padding: 5px; 
     font-size: 14px; 
     font-family: Arial; 
     border: 1px solid #ccc; 
     box-shadow: 0 2px 2px rgba(33, 33, 33, 0.4); 
     display: none; 
     } 

     @media print { 
     #map-canvas { 
      height: 500px; 
      margin: 0; 
     } 

     #directions-panel { 
      float: none; 
      width: auto; 
     } 
     } 
    </style> 
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true">  </script> 
    <script> 
    var directionsDisplay; 
    var directionsService = new google.maps.DirectionsService(); 

    function initialize() { 
    directionsDisplay = new google.maps.DirectionsRenderer(); 
    var mapOptions = { 
    zoom: 7, 
    center: new google.maps.LatLng(41.850033, -87.6500523) 
    }; 
    var map = new google.maps.Map(document.getElementById('map-canvas'), 
     mapOptions); 
    directionsDisplay.setMap(map); 
    directionsDisplay.setPanel(document.getElementById('directions-panel')); 

    var control = document.getElementById('control'); 
    control.style.display = 'block'; 
    map.controls[google.maps.ControlPosition.TOP_CENTER].push(control); 
    } 

function calcRoute() { 
    var start = document.getElementById('start').value; 
    var end = document.getElementById('end').value; 
    var request = { 
    origin: start, 
    destination: end, 
    travelMode: google.maps.TravelMode.TRANSIT 
    }; 
    directionsService.route(request, function(response, status) { 
    if (status == google.maps.DirectionsStatus.OK) { 
     directionsDisplay.setDirections(response); 
    } 
    }); 
} 

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

    </script> 
    </head> 
    <body> 
    <div id="control"> 
     <strong>Start:</strong> 

     <input type="text" data-bind="value:start"/> 

     <strong>End:</strong> 

     <input type="text" data-bind="value:end"/> 

     <button onclick="calcRoute()">Get Directions</button> 

    </div> 

    <div id="directions-panel"></div> 
    <div id="map-canvas"></div> 
    </body> 
</html>

источник

2015-03-03 hackrnaut

' ' –

Я думаю, что вы используете getElementById без установки каких-либо идентификаторов в вашем HTML

<!-- Elements don't have IDs --> 
<input type="text" data-bind="value:start"/> 
<input type="text" data-bind="value:end"/>

Попробуйте это:

<input id="start" type="text" data-bind="value:start"/> 
<input id="end" type="text" data-bind="value:end"/>

Теперь, когда этот код вызывается, элементы должны быть найдены

var start = document.getElementById('start').value; 
var end = document.getElementById('end').value;

источник

2015-03-03 05:03:47 jasonscript

Большое вам спасибо! Это сработало:] – hackrnaut

Сопоставление значений с функцией после события Click

ответ

Смежные вопросы