javascript - 绘图管理器标记监听器 Position_Changed

Question

我的代码有问题。我想在使用绘图管理器绘制标记后制作一个可拖动标记，并且希望使输入字段 [lat & lon] 的值随可拖动标记位置而变化值(value)。这是我的代码:

    function initMap() {
        // set up the map
        mapModal = new google.maps.Map(document.getElementById('mapModal'), {
            center : {lat: lat, lng: lng},
            zoom : 15,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            disableDefaultUI: false,
            zoomControl : true,
        });

        var drawingManager = new google.maps.drawing.DrawingManager({
            drawingMode: google.maps.drawing.OverlayType.MARKER,
            drawingControl: true,
            drawingControlOptions: {
                position: google.maps.ControlPosition.TOP_CENTER,
                drawingModes: ['marker']
            },
            markerOptions: {
                editable: true,
                draggable: true,
            },
        });
        drawingManager.setMap(mapModal);
        google.maps.event.addListener(drawingManager, 'overlaycomplete', function(marker) {
            google.maps.event.addListener(marker, 'position_changed', function () {
                var lat = marker.getPosition().lat();
                var lon = marker.getPosition().lng();

                $('#lat').val(lat);
                $('#lon').val(lon);
            });
        });
    }

我从未发现输入字段 [lat & lon] 的值已更改。这里有人可以帮助我解决我的问题吗？谢谢!

Answer 1

我认为主要问题是marker.getPosition().lat();在事件处理程序中，您应该使用“this”而不是“marker”。不确定它是否能解决所有问题。

这是一个简单的“拖动标记，在输入元素中写入坐标”

<input id="lat" />
<input id="lng" />
<div id="map"></div>
<style>
    #map {
        height: 400px;
    }
</style>
<script>
    function initMap() {
        var myLatlng = {  // Brussels
            lat: 50.85,
            lng: 4.35
        };

        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 12,
            center: myLatlng
        });

        var marker = new google.maps.Marker({
            position: myLatlng,
            map: map,
            draggable: true,
            title: 'Drag me'
        });

        google.maps.event.addListener(marker, 'position_changed', function() {
            // inside an event handler you should use "this".  
            // "this" represents whatever got affected, in this case the marker
            document.getElementById('lat').value = this.getPosition().lat();
            document.getElementById('lng').value = this.getPosition().lng();
        });

    }
</script>
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>