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

我是谷歌地图的新手。我浏览了很多帖子，但没有找到我想要的。我想做到这一点：

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

当我使用Asp.net时，我的html页面不同，我的地图显示在aspx页面的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>

函数initMap（）{
if（导航器.地理位置）{
navigator.geolocation.getCurrentPosition（showPosition，showError）；
}否则{
x、 innerHTML=“此浏览器不支持地理位置。”；
}
功能错误（错误）{
开关（错误代码）{
案例错误。权限被拒绝：
x、 innerHTML=“用户拒绝了地理位置请求。”
打破
案例错误。位置不可用：
x、 innerHTML=“位置信息不可用。”
打破
大小写错误。超时：
x、 innerHTML=“获取用户位置的请求超时。”
打破
案例错误。未知错误：
x、 innerHTML=“发生未知错误。”
打破
}
}
更新标记位置（latlon）；
地理共沉积（latlon）；
}
功能显示位置（位置）{
纬度=位置坐标纬度；
lon=位置坐标经度；
latlon=新的google.maps.LatLng（lat，lon）
mapholder=document.getElementById（'map'））
变量myOptions={
中心：拉特伦，
缩放：14，
mapTypeId:google.maps.mapTypeId.ROADMAP，
mapTypeControl:false，
导航控制选项：
{style:google.maps.NavigationControlStyle.SMALL}
}
var contentString='拖动红色标记以改善地理位置'；
var infowindow=new google.maps.infowindow({
内容：contentString
});
信息窗口。打开（地图、标记）；
var map=new google.maps.map（document.getElementById（“map”），myOptions）；
var marker=new google.maps.marker({
职位：拉特隆，
地图：地图，
标题：“报告引用此位置”，
德拉格布尔：是的
});
//添加拖动事件侦听器。
google.maps.event.addListener（标记'dragstart'，函数（）{
UpdateMarkeradAddress（'拖动…'）；
});
google.maps.event.addListener（标记'drag'，函数（）{
updateMarkerStatus（'拖动…'）；
updateMarkerPosition（marker.getPosition（））；
});
google.maps.event.addListener（标记'dragend'，函数（）{
updateMarkerStatus（“拖动结束”）；
geocodePosition（marker.getPosition（））；
});
}

---

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

这应该足以理解反向地理编码的工作原理（从点的坐标获取地址）

var地理编码器；
函数initMap（）{
geocoder=新的google.maps.geocoder（）；
if（导航器.地理位置）{
navigator.geolocation.getCurrentPosition（showPosition，showError）；
}否则{
x=document.getElementById（“msg”）；
x、 innerHTML=“此浏览器不支持地理位置。”；
}
功能错误（错误）{
x=document.getElementById（“msg”）；
开关（错误代码）{
案例错误。权限被拒绝：
x、 innerHTML=“用户拒绝了地理位置请求。”
打破
案例错误。位置不可用：
x、 innerHTML=“位置信息不可用。”
打破
大小写错误。超时：
x、 innerHTML=“获取用户位置的请求超时。”
打破
案例错误。未知错误：
x、 innerHTML=“发生未知错误。”
打破
}
}
//更新标记位置（latlon）；
//地理共沉积（latlon）；
}
功能地理编码定位（pos）{
x=document.getElementById（“msg”）；
geocoder.geocode（{'latLng'：pos}，函数（结果，状态）{
if（status==google.maps.GeocoderStatus.OK）{
如果（结果[0]）{
x、 innerHTML=结果[0]。格式化的\u地址；
}
}否则{
x、 innerHTML=“地理编码器不可能”；
}  
});
}
功能显示位置（位置）{
纬度=位置坐标纬度；
lon=位置坐标经度；
latlon=新的google.maps.LatLng（lat，lon）
mapholder=document.getElementById（'map'））
变量myOptions={
中心：拉特伦，
缩放：14，
mapTypeId:google.maps.mapTypeId.ROADMAP，
mapTypeControl:false，
导航控制选项：
{style:google.maps.NavigationControlStyle.SMALL}
}
var contentString='拖动红色标记以改善地理位置'；
var infowindow=new google.maps.infowindow({
内容：contentString
});
信息窗口。打开（地图、标记）；
var map=new google.maps.map（document.getElementById（“map”），myOptions）；
var marker=new google.maps.marker({
职位：拉特隆，
地图：地图，
标题：“报告引用此位置”，
德拉格布尔：是的
});
//添加拖动事件侦听器。
google.maps.event.addListener（marke
 <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>