javascript - 使用 GMaps 标记位置从 JavaScript 更新 PHP <input> 字段

标签 javascript google-maps google-maps-markers

我已成功在点击时向 Google map 添加标记,但现在我需要更新 <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>

最佳答案

原则上你也可以处理 change输入字段上的事件并设置标记的坐标。这就是我在我的应用程序中所做的。我还处理 drag标记事件并在拖动过程中更改坐标。在这种情况下,处理 dragdragend标记事件! 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
});

关于javascript - 使用 GMaps 标记位置从 JavaScript 更新 PHP &lt;input&gt; 字段,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8468439/

相关文章:

javascript - 如何使用 Selenium RC 测试 DHTML?

google-maps - Google Maps API V3 - 如何通过任意航点获得最佳往返路线

html - 为谷歌地图提供叠加图像,同时保持 map 可移动

android - Google Maps V2 - Android - 获取标记列表

android - 删除以前的标记并在 Google Map v2 中添加新标记

javascript - 延迟解析 JavaScript 以加载 JQuery

javascript - 如何在没有弹出的情况下获取数组的最后一项?

javascript - 如何在 Material Design Lite 工具提示中使用类而不是 ID?

android - 如果未登录 Google Play 帐户,为什么 MapView 会返回 null?

javascript - 如何使用 Google Maps API v3 + 我自己的 map 图 block 显示标记