Question

这是谷歌api地图的反向地理编码。我的问题是...... 可以删除或隐藏<div id="panel">并从当前用户位置获取数据，而无需用户按下按钮进行反向地理编码？我只想显示用户的地址，而不是高度和高度。经度.. 谢谢

 <!DOCTYPE html>
        <html>
          <head>
            <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
            <meta charset="utf-8">
            <title>Reverse Geocoding</title>
            <style>
              html, body, #map-canvas {
                height: 100%;
                margin: 0px;
                padding: 0px
              }
              #panel {
                position: absolute;
                top: 5px;
                left: 50%;
                margin-left: -180px;
                z-index: 5;
                background-color: #fff;
                padding: 5px;
                border: 1px solid #999;
              }
            </style>
            <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
            <script>
        var geocoder;
        var map;
        var infowindow = new google.maps.InfoWindow();
        var marker;
        function initialize() {
          geocoder = new google.maps.Geocoder();
          var latlng = new google.maps.LatLng(40.730885,-73.997383);
          var mapOptions = {
            zoom: 8,
            center: latlng,
            mapTypeId: 'roadmap'
          }
          map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
        }

        function codeLatLng() {
          var input = document.getElementById('latlng').value;
          var latlngStr = input.split(',', 2);
          var lat = parseFloat(latlngStr[0]);
          var lng = parseFloat(latlngStr[1]);
          var latlng = new google.maps.LatLng(lat, lng);
          geocoder.geocode({'latLng': latlng}, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
              if (results[1]) {
                map.setZoom(11);
                marker = new google.maps.Marker({
                    position: latlng,
                    map: map
                });
                infowindow.setContent(results[1].formatted_address);
                infowindow.open(map, marker);
              } else {
                alert('No results found');
              }
            } else {
              alert('Geocoder failed due to: ' + status);
            }
          });
        }

        google.maps.event.addDomListener(window, 'load', initialize);

            </script>
            <style>
              #panel {
                position: absolute;
                top: 5px;
                left: 50%;
                margin-left: -180px;
                width: 350px;
                z-index: 5;
                background-color: #fff;
                padding: 5px;
                border: 1px solid #999;
              }
              #latlng {
                width: 225px;
              }
            </style>
          </head>
          <body>


     <div id="panel">
              <input id="latlng" type="text" value="40.714224,-73.961452">
              <input type="button" value="Reverse Geocode" onclick="codeLatLng()">
            </div>
            <div id="map-canvas"></div>


          </body>
        </html>

Answer 1

是你可以。

我希望您了解HTML5 Geolocation，这将有助于您了解用户的当前位置。

if (navigator.geolocation) {
     navigator.geolocation.getCurrentPosition(function (position) {
         revereGeoCode(position.coords.latitude, position.coords.longitude);
     });
 } else {
  // make sure to handle the failure
 }

使用这个应用你的概念并摆脱手动获取lat和lng。

完整代码如下所示

 var geocoder;
 var map;
 var marker;
 var infowindow = new google.maps.InfoWindow();

 function initializeMap() {

     if (navigator.geolocation) {
         navigator.geolocation.getCurrentPosition(function (position) {
             revereGeoCode(position.coords.latitude, position.coords.longitude);
         });
     } else {
         console.log("er")
         // make sure to handle the failure
     }

     var mapOptions = {
         zoom: 8,
         center: new google.maps.LatLng(40.730885, -73.997383),
         mapTypeId: 'roadmap'
     }
     map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
 }

 function revereGeoCode(lat, lng) {
     geocoder = new google.maps.Geocoder();
     var latlng = new google.maps.LatLng(lat, lng);
     geocoder.geocode({
         'latLng': latlng
     }, function (results, status) {
         if (status == google.maps.GeocoderStatus.OK) {
             if (results[1]) {
                 // place your marker coding
                 map.setZoom(11);
                 marker = new google.maps.Marker({
                     position: latlng,
                     map: map
                 });
                 infowindow.setContent(results[1].formatted_address);
                 infowindow.open(map, marker);
             } else {
                 alert('No results found');
             }
         } else {
             alert('Geocoder failed due to: ' + status);
         }
     });
 }

 google.maps.event.addDomListener(window, 'load', initializeMap);

无需手动输入即可自动完成反向地理编码的数据

1 个答案:

JSFiddle