代码之家  ›  专栏  ›  技术社区  ›  rob.m

如何将反向地理编码值输入到输入字段中?

  •  -2
  • rob.m  · 技术社区  · 7 年前

    google提供的示例代码 reverse geocoding coordinates into full address 很好,在上使用回复时同样的结果也很好 this stack question

    <p id="addressHelper" ></p>
    <div id="map"></div>
    
    var myMarker = new google.maps.Marker({
     position: new google.maps.LatLng(47.651968, 9.478485),
     draggable: true
    });
    
    google.maps.event.addListener(myMarker, 'dragend', function (evt) {
     document.getElementById('addressHelper').innerHTML = '<p>Marker dropped: Current Lat: ' + evt.latLng.lat().toFixed(3) + ' Current Lng: ' + evt.latLng.lng().toFixed(3) + '</p>';
    });
    
    google.maps.event.addListener(myMarker, 'dragstart', function (evt) {
      document.getElementById('addressHelper').innerHTML = '<p>Currently dragging marker...</p>';
    });
    
    map.setCenter(myMarker.position);
    myMarker.setMap(map);
    
    1 回复  |  直到 7 年前
        1
  •  0
  •   rob.m    7 年前

    在玩了一些游戏并阅读了周围的其他教程之后,我的解决方案是:

    <input type="text" id="location-text-box" name="address" placeholder="Your location..." required="">
    <div id="map"></div>
    
    
        window.onload = function () {
          var myLatlng = new google.maps.LatLng(-25.363882, 131.044922);
          var mapOptions = {
            center: myLatlng,
            zoom: 1,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            disableDefaultUI: true,
            zoomControl: true
          };
    
          var map = new google.maps.Map(document.getElementById("map"), mapOptions);
    
          var marker = new google.maps.Marker({
            position: myLatlng,
            map: map,
            draggable:true,
            title:"Drag me!"
          });
    
          google.maps.event.addListener(marker, 'dragend', function (e) {
            var latlng = new google.maps.LatLng(e.latLng.lat(), e.latLng.lng());
            var geocoder = geocoder = new google.maps.Geocoder();
            geocoder.geocode({ 'latLng': latlng }, function (results, status) {
              if (status == google.maps.GeocoderStatus.OK) {
                if (results[1]) {
                  $("#location-text-box").attr("value", results[1].formatted_address);
                }
              }
            });
          });
        }