Google 地图地理编码 API（如何获取 Lat/Long）

Question

我正在开发一个与地图交互的 Web 应用程序，所以我正在使用 Google 地图 JavaScript API (v3.0)。

该应用程序将有一个搜索框（一个 HTML <input> 标签），用户可以在其中输入人类可读的地名（例如“19/2 Pine Street, Seattle”）并点击按钮。输入应发送至 Google 地图 API，并且应 return 搜索地点的地理位置（纬度和经度）。

我已经搜索了 Google 地图 API 文档，但那里的一切都太混乱了。我希望是否有人可以帮助我提供自定义解决方案。

这是我到目前为止所做的：

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Demo Rails App</title>
    <script src="https://maps.googleapis.com/maps/api/js?key=[key-here]"></script>
    <script>
    var geocoder;
    function initialize() {
      geocoder = new google.maps.Geocoder();
    }
    function codeAddress() {
      var address = document.getElementById("address").value;
      geocoder.geocode( { 'address': address }, function(r, s) {
        alert(r[0].geometry.location);
      });
    }
    </script>
  </head>

  <body onload="initialize()">
    <input type="search" id="address">
    <input type="button" value="Submit" onclick="codeAddress()">
  </body>
</html>

谢谢！

Answer 1

    <script src="https://maps.googleapis.com/maps/api/js?key=[key-here]">you forgot to close the script tag</script>

这就是它不起作用的原因

编辑：自动完成，我刚刚拼凑的一些东西

googlePlaceSearch = function (qry, callback) {
    var placeSearch, autocomplete;
    var addressParts = {
        street_number: '',
        route: '',
        locality: '',
        administrative_area_level_1: '',
        country: '',
        postal_code: ''
    };
    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'
    };
    var fillInAddress() {
        placeSearch.style.display = 'none';
        var place = autocomplete.getPlace();
        if (place) {
            place.address_components.forEach(function (comp) {
                var addressType = comp.types[0];
                if (componentForm[addressType]) {
                    addressParts[addressType] = comp[componentForm[addressType]];
                }
            });
        }
        callback(addressParts);
        google.maps.event.removeListener(autocomplete, 'place_changed', fillInAddress);
    }
    autocomplete = new google.maps.places.Autocomplete((document.querySelector(qry)), {
        types: ['address']
    });
    google.maps.event.addListener(autocomplete, 'place_changed', fillInAddress);
};

开始使用

googlePlaceSearch("#address", someFn);

其中 #address 是一个 CSS 选择器来定位输入元素（在你的情况下很容易，就像我说的那样，#address，但我把它放在一起是为了灵活），和 someFn是一个接收addressParts的函数，所以你可以用返回的地址

做你想做的事

Answer 2

哦，我刚刚找到解决方案：

<script src="https://maps.googleapis.com/maps/api/js?key=[key-here]&libraries=places"></script>
<script>
var geocoder;
function initialize() {
  geocoder = new google.maps.Geocoder();
}
function codeAddress() {
  var input = document.getElementById("address");
  var autocomplete = new google.maps.places.Autocomplete(input);
  var address = document.getElementById("address").value;
  geocoder.geocode( { 'address': address }, function(r, s) {
    alert(r[0].geometry.location);
  });
}
</script>

和HTML：

<body onload="initialize()">
  <input type="search" id="address">
  <input type="button" value="Submit" onclick="codeAddress()">
</body>

Google 地图地理编码 API（如何获取 Lat/Long）

Google Maps Geocoding API (How to get Lat/Long)

javascript

google-maps

geocoding

geolocation

google-maps-api-3