html - 谷歌地图标记不拖动

Question

我一直在尝试将谷歌地图添加到我的网站，其中标记将显示用户的当前位置，用户可以拖动标记，位置名称将显示在文本框中。但是我的标记没有移动，还有如何获取文本框中的位置，反之亦然文本框在 map 上的位置。我想实现这个:enter link description here

    function initMap() {
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(showPosition,   showError);
        } else {
            x.innerHTML = "Geolocation is not supported by this browser.";
        }
    }

    function showPosition(position) {
        lat = position.coords.latitude;
        lon = position.coords.longitude;
        latlon = new google.maps.LatLng(lat, lon)
        mapholder = document.getElementById('map')

        var myOptions = {
            center: latlon, zoom: 14,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            mapTypeControl: false,
            navigationControlOptions: 
            { style:google.maps.NavigationControlStyle.SMALL }
            }  

        var map = new google.maps.Map(document.getElementById("map"),     myOptions);
        var marker = new google.maps.Marker({
            position: latlon,
            map: map,
            title: "Choose",
            draggable: true
        });


    }

    function showError(error) {
        switch (error.code) {
            case error.PERMISSION_DENIED:
                x.innerHTML = "User denied the request for Geolocation."
                break;
            case error.POSITION_UNAVAILABLE:
                x.innerHTML = "Location information is unavailable."
                break;
            case error.TIMEOUT:
                x.innerHTML = "The request to get user location timed out."
                break;
            case error.UNKNOWN_ERROR:
                x.innerHTML = "An unknown error occurred."
                break;
        }
    }

    updateMarkerPosition(latlon);
    geocodePosition(latlon);

    // Add dragging event listeners.
    google.maps.event.addListener(marker, 'dragstart', function () {
        updateMarkerAddress('Dragging...');
    });

    google.maps.event.addListener(marker, 'drag', function () {
        updateMarkerStatus('Dragging...');
        updateMarkerPosition(marker.getPosition());
    });

    google.maps.event.addListener(marker, 'dragend', function () {
        updateMarkerStatus('Drag ended');
        geocodePosition(marker.getPosition());
    });



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

Answer 1

如果你想使用监听器，这些应该位于你创建标记的地方，而不是在函数之外..

function showPosition(position) {
    lat = position.coords.latitude;
    lon = position.coords.longitude;
    latlon = new google.maps.LatLng(lat, lon)
    mapholder = document.getElementById('map')

    var myOptions = {
        center: latlon, 
        zoom: 14,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        mapTypeControl: false,
        navigationControlOptions: 
        { style:google.maps.NavigationControlStyle.SMALL }
        }  

    var map = new google.maps.Map(document.getElementById("map"),     myOptions);
    var marker = new google.maps.Marker({
        position: latlon,
        map: map,
        title: "Choose",
        draggable: true
    });

    // Add dragging event listeners.
    google.maps.event.addListener(marker, 'dragstart', function () {
        updateMarkerAddress('Dragging...');
    });

    google.maps.event.addListener(marker, 'drag', function () {
       updateMarkerStatus('Dragging...');
       updateMarkerPosition(marker.getPosition());
    });

    google.maps.event.addListener(marker, 'dragend', function () {
        updateMarkerStatus('Drag ended');
        geocodePosition(marker.getPosition());
    });


}