взаимодействия между картой Google и образуют входы

Question

У меня есть страница HTML, как это:

<button onclick="initMap()">Regenerate</button><BR> 

    Latitude<input style="width: 5em;" id="lat" name="lat" type="number" value="35.9000" step="0.1"/></div><BR> 
    Longitude<input style="width: 5em;" id="long" name="long" type="number" value="15.7500" step="0.1"/></div> 


    <div id="map"></div> 

     <script> 

      var map; 

      function initMap() { 

       var latitude = parseFloat ($('#lat').val()); 
       var longitude = parseFloat ($('#long').val()); 

       var mapOptions = { 

        zoom: 13, 
        center: new google.maps.LatLng(latitude, longitude), 
        mapTypeId: google.maps.MapTypeId.TERRAIN 

       }; 

       map = new google.maps.Map(document.getElementById('map'), mapOptions); 


      } 

     $("#lat").change(function() { 
      placeMarkers(); 
     }); 

     $("#long").change(function() { 
      placeMarkers(); 
     }); 

function placeMarkers() { 

     var latitude = parseFloat ($('#lat').val()); 
     var longitude = parseFloat ($('#long').val()); 

     var markerDep = new google.maps.Marker({ 
      position: {lat: latitude, lng: longitude}, 
      map: map, 
      label: "D", 
      draggable: true, 
      title: 'Departure' 
     }); 

     var markerArr = new google.maps.Marker({ 
      position: {lat: latitude+0.01, lng: longitude+0.01}, 
      map: map, 
      label: "A", 
      draggable: true, 
      title: 'Arrival' 
     }); 

    } 

     </script> 

Я хотел бы сделать взаимодействие со значениями, указанными пользователем в форме и карте.

EDIT: частично решена, см выше код

Обновление карты каждый раз, когда пользователь нажимает/изменяет значение является немного «тяжелым». Итак, вместо вызова initMap() при каждом изменении ввода, я бы хотел только заменить маркеры? Но placeMarkers() не удается это сделать ... кроме первого раза (при загрузке). Другие времена, они создают новые маркеры ...

Answer 1

У меня есть приемлемое решение для тех, кому интересно, вот это:

Departure : 
Latitude<input style="width: 5em;" id="latD" name="latD" type="number" value="37" step="0.01"/></div><BR> 
Longitude<input style="width: 5em;" id="longD" name="longD" type="number" value="11" step="0.01"/></div> 
<BR> 
Arrival: <BR> 
Latitude<input style="width: 5em;" id="latA" name="latA" type="number" value="38" step="0.01"/></div><BR> 
Longitude<input style="width: 5em;" id="longA" name="longA" type="number" value="12" step="0.01"/></div> 

<div id="map"></div> 

<script> 

    var map; 
    var markerArr; 
    var markerDep; 

    //init function 
    function initMap() { 

     //used for the definition of the map's center 
     var latitude = parseFloat ($('#latD').val()); 
     var longitude = parseFloat ($('#longD').val()); 

     var mapOptions = { 

      zoom: 13, 
      center: new google.maps.LatLng(latitude, longitude), 
      mapTypeId: google.maps.MapTypeId.TERRAIN 

     }; 

     map = new google.maps.Map(document.getElementById('map'), mapOptions); 

     //creates the Departure and Arrival markers 
     placeDepMarker(); 
     placeArrMarker(); 

    } 

    //creates Departure 
    function placeDepMarker() { 

     var latitude = parseFloat ($('#latD').val()); 
     var longitude = parseFloat ($('#longD').val()); 

     markerDep = new google.maps.Marker({ 
      position: {lat: latitude, lng: longitude}, 
      map: map, 
      label: "D", 
      draggable: true, 
      title: 'Departure' 
     }); 

    } 

    //creates Arrival 
    function placeArrMarker() { 

     var latitude = parseFloat ($('#latA').val()); 
     var longitude = parseFloat ($('#longA').val()); 

     markerArr = new google.maps.Marker({ 
      position: {lat: latitude+0.01, lng: longitude+0.01}, 
      map: map, 
      label: "A", 
      draggable: true, 
      title: 'Arrival' 
      });     
    } 

    //Erases Arrival marker 
    function clearArrMarker() { 
     markerArr.setMap(null); 
    } 

    //erases Departure marker 
    function clearDepMarker() { 
     markerDep.setMap(null); 
    } 

    $("#latD, #longD").change(function() { 
     clearDepMarker(); 
     placeDepMarker(); 
    }); 

    $("#latA, #longA").change(function() { 
     clearArrMarker(); 
     placeArrMarker(); 
    }); 



</script> 

Конечно, многие улучшения могут быть achived, например clearDepMarker() и clearArrMarker() может быть достигнуто в рамках одной и той же функции:

//erases the given marker 
    function clearMarker(marker) { 
     marker.setMap(null); 
    } 

Теперь мне нужно учитывать сопротивления/падения, чтобы обновить форму