谷歌地图地理编码API（如何获得纬/长）

-1

我正在开发一个与地图交互的Web应用程序，所以我使用Google Maps JavaScript API（v3.0）。谷歌地图地理编码API（如何获得纬/长）

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

我已经通过Google Maps 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>

谢谢！

来源

2015-07-10 Abraar Arique Diganto

您提到了Geocoding API，所以我猜你已经通读了文档。到目前为止，你在努力尝试什么？ –

@ TaoP.R。目前代码采用搜索输入并提醒预测经纬度。但是我也需要自动完成功能（就像在打字时一样，它会显示建议的地方列表）。如下例所示：https：//google-developers.appspot.com/maps/documentation/javascript/examples/full/places-searchbox –

https://developers.google.com/maps/documentation/javascript/examples/places -autocomplete一切都在那里。 – MrUpsidown

<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所以你可以做你想要返回的地址

来源

2015-07-10 10:32:59

糟糕！那是个错误。但我仍然需要自动完成功能。 –

哦FFS - 我把一个通用的自动填充放在一起，并在此期间你问自己的问题：p –

啊什么的，我只是找到解决方案的功能：

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

来源

2015-07-10 10:43:29

谷歌地图地理编码API（如何获得纬/长）

回答

相关问题