Question

目前拖动地图标记时，位置会显示在div标记中，但我想在文本框中显示，而不是在div中显示。 我希望它在int textbox txtLoc。它显示当前在div中，即'msg'。我的infowindow也没有显示。

    <asp:TextBox ID="txtLoc" CssClass="form-control" 
     runat="server"   style="margin-left:120px" ></asp:TextBox>&nbsp;
    <button ID="lblFind" runat="server" class="btn btn-info btn-xs">
     Find   location on map</button>
    <br/><br />
     <div id='msg'></div>
     <div id="map" style="height:300px;width:600px"></div>
      </div>



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

  }

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


    google.maps.event.addListener(marker, 'dragstart', function (evt) {
    x=document.getElementById("msg"); 
   });

    google.maps.event.addListener(marker, 'drag', function (evt) {
    x=document.getElementById("msg");
   });

    google.maps.event.addListener(marker, 'dragend', function (evt) {
    x=document.getElementById("msg");
   geocodePosition(marker.getPosition());
  });

}

Answer 1

这是带有文本框（也）的代码的工作版本，用于显示反向地理编码结果看一下新版本的geocodePosition（函数addAddress（）不再需要了）

<body >
 <!--  div id="map" style="width: 1800px; height: 1300px"></div-->
<input id="txtLoc" type="text" name="testname"  style="width: 400px;"><br>
<div id='msg'>Test</div>
<div id="map"></div>
<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;
               y  = document.getElementById("txtLoc");
               y.value =  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>

  </body>

谷歌地图标记显示文本框中的位置而不是div标签

1 个答案: