Question

我有这个代码，您可以在其中单击地图的某个部分，经度和纬度将显示在输入字段中。我试图使用

自动将输入字段的值传递给另一个输入字段

$(document).ready(function () {
            $('#lat').change(function () {
                $('#lati').val($('#lat').val());
            });
        });

但它没有传递值。

这是代码（我使用的是 Mapbox API）：

<html>
<head>
    <script src='https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js'></script>
    <link href='https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css' rel='stylesheet' />
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #map {
            position: absolute;
            top: 10%;
            bottom: 0;
            width: 60%;
            height: 60%;
        }
    </style>
</head>

<body>
    <input id='lat' name='lat' type='text' /> lat
    <input id='lng' name='lng' type='text' /> long
    <br><br>
    <input id='lati' name='lati' type='text' /> lati
    <input id='lngi' name='lngi' type='text' /> longi

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

    <script>
        mapboxgl.accessToken = 'pk.eyJ1IjoianNjYXN0cm8iLCJhIjoiY2s2YzB6Z25kMDVhejNrbXNpcmtjNGtpbiJ9.28ynPf1Y5Q8EyB_moOHylw';
        var map = new mapboxgl.Map({
            container: 'map',
            style: 'mapbox://styles/mapbox/streets-v11',
            center: [-122.486052, 37.830348],
            zoom: 14
        })

        map.on('style.load', function () {
            map.on('click', function (e) {
                var lat = e.lngLat.lat;
                var long = e.lngLat.lng;
                document.getElementById("lat").value = e.lngLat.lat;
                document.getElementById("lng").value = e.lngLat.lng;
            }).addTo(map);;
        });

        $(document).ready(function () {
            $('#lat').change(function () {
                $('#lati').val($('#lat').val());
            });
        });
    </script>

</body>
</html>

谢谢！

Answer 1

因为值以编程方式更改。你必须手动触发 change 事件 this question

        $(document).ready(function () {
            $('#lat').change(function () {
                $('#lati').val($('#lat').val());
            });
            
            
        $('#lng').change(function () {
            $('#lngi').val($('#lng').val());
        });
            
            
        mapboxgl.accessToken = 'pk.eyJ1IjoianNjYXN0cm8iLCJhIjoiY2s2YzB6Z25kMDVhejNrbXNpcmtjNGtpbiJ9.28ynPf1Y5Q8EyB_moOHylw';
        var map = new mapboxgl.Map({
            container: 'map',
            style: 'mapbox://styles/mapbox/streets-v11',
            center: [-122.486052, 37.830348],
            zoom: 14
        })

        map.on('style.load', function () {
            map.on('click', function (e) {
                var lat = e.lngLat.lat;
                var long = e.lngLat.lng;
                document.getElementById("lat").value = e.lngLat.lat;
                 $('#lat').trigger('change');
                document.getElementById("lng").value = e.lngLat.lng;
                 $('#lng').trigger('change');
            });
        });
        });

        body {
            margin: 0;
            padding: 0;
        }

        #map {
            position: absolute;
            top: 30%;
            bottom: 0;
            width: 60%;
            height: 60%;
        }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head>
    <script src='https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js'></script>
    <link href='https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css' rel='stylesheet' />

</head>

<body>
    <input id='lat' name='lat' type='text' /> lat
    <input id='lng' name='lng' type='text' /> long
    
    <input id='lati' name='lati' type='text' /> lati
    <input id='lngi' name='lngi' type='text' /> longi

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



</body>
</html>

Answer 2

我认为您可以通过同时在其他输入字段中设置值来做到这一点。

map.on('style.load', function () {
        map.on('click', function (e) {
            var lat = e.lngLat.lat;
            var long = e.lngLat.lng;
            document.getElementById("lat").value = e.lngLat.lat;
            document.getElementById("lng").value = e.lngLat.lng;
            
            //setting value to another input field
            document.getElementById("lati").value = e.lngLat.lat;
        }).addTo(map);;
    });

如果这不是您要找的解决方案，请更新您的问题。

将输入字段值的值转移到另一个输入字段

2 个答案: