Question

我有一个自动填写的表单，可以让我使用Google Maps API及其地方库获取商家的地址和名称。

我希望能够从我搜索过的地方获取lat和lng值：

目前我在代码中找到它们，但由于它不像文档中详述的那样，我不知道如何获取这些值，或者每次它们是否真的准确（它们对于~20次尝试都是正确的）已完成）。

正如你所看到的，我从“lat”部分得到了lat和lng，我可以从“lng”部分得到完全相同的信息。

这是我的代码：

function initAutocomplete() {
  var input = document.getElementById('autocomplete');
  var options = {
    types: ['geocode', 'establishment']
  };
  autocomplete = new google.maps.places.Autocomplete(input, options);

  autocomplete.addListener('place_changed', fillInAddress);

};

function fillInAddress() {
  // Get the place details from the autocomplete object.
  var place = autocomplete.getPlace();
  console.log(place);

  for (var component in componentForm) {
    document.getElementById(component).value = '';
    document.getElementById(component).disabled = false;
  }
  document.getElementById("business").value = place.name;
  document.getElementById("business").disabled = false;
  // Get each component of the address from the place details
  // and fill the corresponding field on the form.
  for (var i = 0; i < place.address_components.length; i++) {
    var addressType = place.address_components[i].types[0];
    if (componentForm[addressType]) {
      var val = place.address_components[i][componentForm[addressType]];
      document.getElementById(addressType).value = val;
    }
  }
}

var placeSearch, autocomplete;
var componentForm = {
  street_number: 'short_name',
  route: 'long_name',
  locality: 'long_name',
  administrative_area_level_1: 'short_name',
  country: 'long_name',
  postal_code: 'short_name',
  lng: 'long_name',
  lat: 'long_name'
};

function geolocate() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      var geolocation = {
        lat: position.coords.latitude,
        lng: position.coords.longitude
      };
      var circle = new google.maps.Circle({
        center: geolocation,
        radius: position.coords.accuracy
      });
      autocomplete.setBounds(circle.getBounds());
    });
  }
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#map {
  height: 100%;
}

#locationField,
#controls {
  position: relative;
  width: 480px;
}

#autocomplete {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 99%;
}

.label {
  text-align: right;
  font-weight: bold;
  width: 100px;
  color: #303030;
}

#address {
  border: 1px solid #000090;
  background-color: #f0f0ff;
  width: 480px;
  padding-right: 2px;
}

#address td {
  font-size: 10pt;
}

.field {
  width: 99%;
}

.slimField {
  width: 80px;
}

.wideField {
  width: 200px;
}

#locationField {
  height: 20px;
  margin-bottom: 2px;
}


/* Always set the map height explicitly to define the size of the div
  * element that contains the map. */

#map {
  height: 100%;
}


/* Optional: Makes the sample page fill the window. */

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#floating-panel {
  position: absolute;
  top: 10px;
  left: 25%;
  z-index: 5;
  background-color: #fff;
  padding: 5px;
  border: 1px solid #999;
  text-align: center;
  font-family: 'Roboto', 'sans-serif';
  line-height: 30px;
  padding-left: 10px;
}

#pano {
  width: 50%;
  height: 100%;
  float: left;
}

#floating-panel {
  width: 45%;
  height: 100%;
  float: right;
  text-align: left;
  overflow: auto;
  position: static;
  border: 0px solid #999;
}

<body>
  <div id="locationField">
    <input id="autocomplete" placeholder="Enter the brand name" onFocus="" type="text" />
  </div>

  <table id="address">
    <tr>
      <td class="label">Brand</td>
      <td class="wideField" colspan="3">
        <input class="field" id="business" disabled="true" />
      </td>
    </tr>
    <tr>
      <td class="label">Location</td>
      <td class="slimField">
        <input class="field" id="street_number" disabled="true" />
      </td>
      <td class="wideField" colspan="2">
        <input class="field" id="route" disabled="true" />
      </td>
    </tr>
    <tr>
      <td class="label">City</td>
      <td class="wideField" colspan="3">
        <input class="field" id="locality" disabled="true" />
      </td>
    </tr>
    <tr>
      <td class="label">State</td>
      <td class="slimField">
        <input class="field" id="administrative_area_level_1" disabled="true" />
      </td>
      <td class="label">number</td>
      <td class="wideField">
        <input class="field" id="postal_code" disabled="true" />
      </td>
    </tr>
    <tr>
      <td class="label">Country</td>
      <td class="wideField" colspan="3">
        <input class="field" id="country" disabled="true" />
      </td>
    </tr>
    <tr>
      <td class="label">lng</td>
      <td class="wideField" colspan="3">
        <input class="field" id="lng" disabled="true" />
      </td>
    </tr>
    <tr>
      <td class="label">lat</td>
      <td class="wideField" colspan="3">
        <input class="field" id="lat" disabled="true" />
      </td>
    </tr>
  </table>


  <script src="https://maps.googleapis.com/maps/api/js?libraries=places&callback=initAutocomplete" async defer></script>

Answer 1

您只需使用记录的方法来获取纬度和经度数据：

document.getElementById("lat").value = place.geometry.location.lat();
document.getElementById("lng").value = place.geometry.location.lng();

＆＃13;

function initAutocomplete() {
  var input = document.getElementById('autocomplete');
  var options = {
    types: ['geocode', 'establishment']
  };
  autocomplete = new google.maps.places.Autocomplete(input, options);
  autocomplete.addListener('place_changed', fillInAddress);
};

function fillInAddress() {
  // Get the place details from the autocomplete object.
  var place = autocomplete.getPlace();
  console.log(place);

  for (var component in componentForm) {
    document.getElementById(component).value = '';
    document.getElementById(component).disabled = false;
  }
  document.getElementById("business").value = place.name;
  document.getElementById("business").disabled = false;
  // Get each component of the address from the place details
  // and fill the corresponding field on the form.
  for (var i = 0; i < place.address_components.length; i++) {
    var addressType = place.address_components[i].types[0];
    if (componentForm[addressType]) {
      var val = place.address_components[i][componentForm[addressType]];
      document.getElementById(addressType).value = val;
    }
  }
  document.getElementById("lat").value = place.geometry.location.lat();
  document.getElementById("lng").value = place.geometry.location.lng();
}

var placeSearch, autocomplete;
var componentForm = {
  street_number: 'short_name',
  route: 'long_name',
  locality: 'long_name',
  administrative_area_level_1: 'short_name',
  country: 'long_name',
  postal_code: 'short_name',
  lng: 'long_name',
  lat: 'long_name'
};

function geolocate() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      var geolocation = {
        lat: position.coords.latitude,
        lng: position.coords.longitude
      };
      var circle = new google.maps.Circle({
        center: geolocation,
        radius: position.coords.accuracy
      });
      autocomplete.setBounds(circle.getBounds());
    });
  }
}
google.maps.event.addDomListener(window, "load", initMap);

＆＃13;

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#map {
  height: 100%;
}

#locationField,
#controls {
  position: relative;
  width: 480px;
}

#autocomplete {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 99%;
}

.label {
  text-align: right;
  font-weight: bold;
  width: 100px;
  color: #303030;
}

#address {
  border: 1px solid #000090;
  background-color: #f0f0ff;
  width: 480px;
  padding-right: 2px;
}

#address td {
  font-size: 10pt;
}

.field {
  width: 99%;
}

.slimField {
  width: 80px;
}

.wideField {
  width: 200px;
}

#locationField {
  height: 20px;
  margin-bottom: 2px;
}


/* Always set the map height explicitly to define the size of the div
  * element that contains the map. */

#map {
  height: 100%;
}


/* Optional: Makes the sample page fill the window. */

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#floating-panel {
  position: absolute;
  top: 10px;
  left: 25%;
  z-index: 5;
  background-color: #fff;
  padding: 5px;
  border: 1px solid #999;
  text-align: center;
  font-family: 'Roboto', 'sans-serif';
  line-height: 30px;
  padding-left: 10px;
}

#pano {
  width: 50%;
  height: 100%;
  float: left;
}

#floating-panel {
  width: 45%;
  height: 100%;
  float: right;
  text-align: left;
  overflow: auto;
  position: static;
  border: 0px solid #999;
}

＆＃13;

<body>
  <div id="locationField">
    <input id="autocomplete" placeholder="Enter the brand name" onFocus="" type="text" />
  </div>

  <table id="address">
    <tr>
      <td class="label">Brand</td>
      <td class="wideField" colspan="3">
        <input class="field" id="business" disabled="true" />
      </td>
    </tr>
    <tr>
      <td class="label">Location</td>
      <td class="slimField">
        <input class="field" id="street_number" disabled="true" />
      </td>
      <td class="wideField" colspan="2">
        <input class="field" id="route" disabled="true" />
      </td>
    </tr>
    <tr>
      <td class="label">City</td>
      <td class="wideField" colspan="3">
        <input class="field" id="locality" disabled="true" />
      </td>
    </tr>
    <tr>
      <td class="label">State</td>
      <td class="slimField">
        <input class="field" id="administrative_area_level_1" disabled="true" />
      </td>
      <td class="label">number</td>
      <td class="wideField">
        <input class="field" id="postal_code" disabled="true" />
      </td>
    </tr>
    <tr>
      <td class="label">Country</td>
      <td class="wideField" colspan="3">
        <input class="field" id="country" disabled="true" />
      </td>
    </tr>
    <tr>
      <td class="label">lng</td>
      <td class="wideField" colspan="3">
        <input class="field" id="lng" disabled="true" />
      </td>
    </tr>
    <tr>
      <td class="label">lat</td>
      <td class="wideField" colspan="3">
        <input class="field" id="lat" disabled="true" />
      </td>
    </tr>
  </table>


  <script src="https://maps.googleapis.com/maps/api/js?libraries=places&callback=initAutocomplete" async defer></script>

＆＃13;

从Google Maps api

1 个答案: