Обновить поле PHP <input>из JavaScript с помощью позиции маркера GMaps - PullRequest
Новая
       12

Обновить поле PHP <input>из JavaScript с помощью позиции маркера GMaps

1 голос
/ 12 декабря 2011

Мне удалось добавить маркеры на карту Google при нажатии, но теперь мне нужно обновлять поле <input> внутри формы каждый раз, когда размещается новый маркер. Таким образом, при размещении нового маркера соответствующий вход обновляется с учетом широты и долготы маркера.

Я использую Google Maps Javascript API v3.

Вот мой Javascript: 

<script type="text/javascript">
function load() {
    var map = new google.maps.Map(document.getElementById("map"), {
        center: new google.maps.LatLng(39.47860556892209,-3.328857421875),
        zoom: 7,
        mapTypeId: 'roadmap'
    });

    var infoWindow = new google.maps.InfoWindow;
    google.maps.event.addListener(map, 'click', function(event) {
        //NEITHER OF THESE 2 OPTIONS WORK
        cambiarMarker(event.latLng);
        //document.getElementById("lat").value = event.latLng.lat();
        //document.getElementById("lng").value = levent.latLng.lng();
        document.forms['insertData'].lati.value = location.lat();
        document.forms['insertData'].long.value = location.lng();   
    });

    var markerActual;

    function cambiarMarker(location) {
        //CREATES AND PUT THE NEW MARKER
    }

    downloadUrl("phpsqlajax_genxml2.php", function(data) {
        //GETS INFO FROM AN XML THAT IS CREATED FROM THE DATABASE WITH PHP 
    }

    function bindInfoWindow(marker, map, infoWindow, html) {
        //BINDS INFORMATION WINDOW WITH THE XML INFO
    }


    function downloadUrl(url, callback) {
        //GET THE XML FILE
    }

    function parseXml(str) {
        //PARSES FROM THE XML
    }

    function doNothing() {}
</script>

А вот и мой HTML: 

<body onload="load()">
    Aqui debería salir algo
    <div id="map" style="width: 500px; height: 300px"></div>
    <form name="insertData" action="insertar_datos.php" method="post">
        Nombre: <input type="text" name="name"><br>
        Dirección: <input type="text" name="address"><br>
        Latitud: <input type="text" name="lati" id="lat"><br> <!--HERE'S INPUT1-LATITUDE-->
        Longitud: <input type="text" name="long" id="lng"><br> <!--HERE'S INPUT2-LONG-->
        Teléfono de contacto: <input type="text" name="telefono"><br>
        Comentario: <textarea name="comentario"></textarea><br>
        <input type="submit" value="Enviar">
    </form>
</body>

1 Ответ

0 голосов
/ 12 декабря 2011

В принципе, вы также можете обработать событие change в поле ввода и установить координаты маркера. Это то, что я делаю в своем приложении. А также я обрабатываю событие drag маркера и меняю координаты во время перетаскивания. В этом случае обрабатывайте события drag и dragend маркера! dragend, который вы ДОЛЖНЫ обрабатывать, drag не так, но это здорово, что координаты меняются при перетаскивании маркера:)

Событие изменения поля ввода может быть обработано, например, таким образом (используя jquery, предполагая, что разметка похожа на <input id="coords"...): 

$('input#coords').change(function () {
    // do the job here: 
    // - convert field coordinates to latLng
    //   for reading the field value use $('input#coords').val()
    // - set the marker position to the new one
});
...