Javascript 谷歌地图地理编码API（如何获取Lat/Long）_Javascript_Google Maps_Google Maps Api 3_Geolocation_Geocoding

Javascript 谷歌地图地理编码API（如何获取Lat/Long）

javascript google-maps google-maps-api-3 geolocation

Javascript 谷歌地图地理编码API（如何获取Lat/Long）,javascript,google-maps,google-maps-api-3,geolocation,geocoding,Javascript,Google Maps,Google Maps Api 3,Geolocation,Geocoding,我正在开发一个与地图交互的Web应用程序，因此我正在使用GoogleMapsJavaScriptAPI（v3.0）该应用程序将有一个搜索框（一个HTML标签），用户可以在其中输入人类可读的地名（如“西雅图松树街19/2号”），然后点击按钮。输入应该发送到谷歌地图API，它应该返回搜索地点的地理位置（纬度和经度）我已经搜索了谷歌地图API文档，但是那里的一切都太混乱了。我希望有人能帮我定制解决方案以下是我迄今为止所做的工作： <!DOCTYPE html> <html la

我正在开发一个与地图交互的Web应用程序，因此我正在使用GoogleMapsJavaScriptAPI（v3.0）

该应用程序将有一个搜索框（一个HTML

标签），用户可以在其中输入人类可读的地名（如“西雅图松树街19/2号”），然后点击按钮。输入应该发送到谷歌地图API，它应该返回搜索地点的地理位置（纬度和经度）

我已经搜索了谷歌地图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>


演示Rails应用程序
var地理编码器；
函数初始化（）{
geocoder=新的google.maps.geocoder（）；
}
函数代码地址（）{
var address=document.getElementById（“地址”）.value；
geocoder.geocode（{'address'：address}，函数（r，s）{
警报（r[0]。几何体。位置）；
});
}

谢谢

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

开始使用

googlePlaceSearch("#address", someFn);

其中#address是一个CSS选择器，用于定位输入元素（在您的情况下很容易，正如我所说，#address，但我把它放在一起是为了灵活），someFn是一个函数，它接收

地址部分

，因此您可以对返回的地址做任何您想做的事情

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

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


var地理编码器；
函数初始化（）{
geocoder=新的google.maps.geocoder（）；
}
函数代码地址（）{
var输入=document.getElementById（“地址”）；
var autocomplete=new google.maps.places.autocomplete（输入）；
var address=document.getElementById（“地址”）.value；
geocoder.geocode（{'address'：address}，函数（r，s）{
警报（r[0]。几何体。位置）；
});
}

和HTML：

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

您提到了地理编码API，所以我想您已经阅读了文档。到目前为止，你一直在努力尝试什么？@TaoP.R。目前，该代码接受搜索输入并警告预测的lat/long。但我也需要自动完成功能（在打字时，它会显示一个位置列表作为建议）。就像在这个例子中：一切都在那里。你发布的代码对我有用（（有地图和没有地图））哦！那是个错误。但是我仍然需要自动完成功能。哦，FFS-我把一个通用的自动完成功能放在一起，同时你回答你自己的问题：p

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