谷歌地圖地理編碼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（如何獲得緯/長）

回答

相關問題