标记应指向位置，如果用户拖动标记，则位置应在文本框中

Question

我是谷歌地图的新手。我浏览了很多帖子，但没有找到我想要的。我想实现这个：improve-my-city

但我只能获取用户位置和拖动标记。我希望标记移动到在按钮单击时在地图上输入的位置，反之亦然，当用户拖动标记时，地址应该在文本框中。我的信息窗口也没有显示。

当我使用 Asp.net 时，我的 html 页面有所不同，我的地图显示在 asp 页面上的 iframe 中。文本框和按钮在 .aspx 页面中

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

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

        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);
    }

    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 contentString = 'Drag red marker <br/> to improve geo-location';
        var infowindow = new google.maps.InfoWindow({
            content: contentString
        });
        infowindow.open(map, marker);

        var map = new google.maps.Map(document.getElementById("map"), myOptions);
        var marker = new google.maps.Marker({
            position: latlon,
            map: map,
            title: 'Report refers to this location',
            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());
        });


    }


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

Answer 1

此示例显示拖动结束时标记的位置地址。

这应该足以理解反向地理编码是如何工作的（从一个点的坐标中获取地址）

 <script type="text/javascript">
    var geocoder;

    function initMap() {
        geocoder = new google.maps.Geocoder();
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(showPosition,  showError);
        } else {
            x=document.getElementById("msg");
            x.innerHTML = "Geolocation is not supported by this browser.";
        }

        function showError(error) {
            x=document.getElementById("msg");
            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);
    }

     function geocodePosition(pos) {
        x=document.getElementById("msg");
        geocoder.geocode({'latLng': pos}, function(results, status) {
          if (status == google.maps.GeocoderStatus.OK) {
            if (results[0]) {
               x.innerHTML = results[0].formatted_address;
              }
          } else {
            x.innerHTML = "Geocoder non possibile";
          }  
        });

    }

    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 contentString = 'Drag red marker <br/> to improve geo-location';
        var infowindow = new google.maps.InfoWindow({
            content: contentString
        });
        infowindow.open(map, marker);

        var map = new google.maps.Map(document.getElementById("map"), myOptions);
        var marker = new google.maps.Marker({
            position: latlon,
            map: map,
            title: 'Report refers to this location',
            draggable: true
        });


        // Add dragging event listeners.
        google.maps.event.addListener(marker, 'dragstart', function (evt) {
             x=document.getElementById("msg");
             x.innerHTML = '<p>Dragging ... Marker dropped: Current Lat: ' + evt.latLng.lat() + ' Current Lng: ' + evt.latLng.lng() + '</p>';
        });

        google.maps.event.addListener(marker, 'drag', function (evt) {
             x=document.getElementById("msg");
             x.innerHTML = '<p>Dragging ... again .... Marker position: Current Lat: ' + evt.latLng.lat() + ' Current Lng: ' + evt.latLng.lng() + '</p>';
        });

        google.maps.event.addListener(marker, 'dragend', function (evt) {
            x=document.getElementById("msg");
            x.innerHTML =  '<p>Drag .. ended ... Marker dropped: Current Lat: ' + evt.latLng.lat() + ' Current Lng: ' + evt.latLng.lng() + '</p>';
            geocodePosition(marker.getPosition());
        });

    }


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