33
我在我的頁面中有一個文本框，該文本框獲取地址名稱和帶有文本getLat&Long的按鈕。現在點擊我的按鈕，我必須在文本框中顯示latitude和longitude的位置警報。任何建議？使用Google自動填充API獲取基於地理位置名稱的經度和緯度
A
回答
37
您可以使用Google Maps API中的Google Geocoder service將您的位置名稱轉換爲經度和緯度。所以，你需要一些這樣的代碼：
var geocoder = new google.maps.Geocoder();
var address = document.getElementById("address").value;
geocoder.geocode({ 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK)
{
// do something with the geocoded result
//
// results[0].geometry.location.latitude
// results[0].geometry.location.longitude
}
});
更新
你包括V3的JavaScript API？
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=set_to_true_or_false">
</script>
+0
錯誤-'google.maps.Geocoder（）;'不是構造函數。 – Chandra 2010-08-16 07:00:21
+0
我如何使用它的來源和目的地我的意思是兩個字段？ – Wearybands 2014-04-10 16:30:13
+0
傳感器的區別是真是假？ – Serge 2015-11-03 10:20:12
15
http://maps.googleapis.com/maps/api/geocode/OUTPUT?address=YOUR_LOCATION&sensor=true
OUTPUT = JSON或XML;
關於谷歌地圖API的詳細信息，請通過網址：
http://code.google.com/apis/maps/documentation/geocoding/index.html
希望這將有助於
+1
這太棒了！只有一個問題，這是否需要API密鑰？ – Supertecnoboff 2015-05-20 09:32:23
8
下面是我使用的代碼。它的工作完美。
var geo = new google.maps.Geocoder;
geo.geocode({'address':address},function(results, status){
if (status == google.maps.GeocoderStatus.OK) {
var myLatLng = results[0].geometry.location;
// Add some code to work with myLatLng
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
希望這會有所幫助。
2
我會建議下面的代碼，你可以使用這個<script language="JavaScript" src="http://j.maxmind.com/app/geoip.js"></script>來獲取一個位置的經度和緯度，雖然它可能不是那麼準確，但它爲我工作;
下面
<!DOCTYPE html>
<html>
<head>
<title>Using Javascript's Geolocation API</title>
<script type="text/javascript" src="http://j.maxmind.com/app/geoip.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>
<body>
<div id="mapContainer"></div>
<script type="text/javascript">
var lat = geoip_latitude();
var long = geoip_longitude();
document.write("Latitude: "+lat+"</br>Longitude: "+long);
</script>
</body>
</html>
31
的代碼片段，我希望這可以幫助別人的未來。
您可以使用Google Geocoding API，如之前所說的，我不得不最近做一些這方面的工作，我希望這有助於：
<!DOCTYPE html>
<html>
<head>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
<script type="text/javascript">
function initialize() {
var address = (document.getElementById('my-address'));
var autocomplete = new google.maps.places.Autocomplete(address);
autocomplete.setTypes(['geocode']);
google.maps.event.addListener(autocomplete, 'place_changed', function() {
var place = autocomplete.getPlace();
if (!place.geometry) {
return;
}
var address = '';
if (place.address_components) {
address = [
(place.address_components[0] && place.address_components[0].short_name || ''),
(place.address_components[1] && place.address_components[1].short_name || ''),
(place.address_components[2] && place.address_components[2].short_name || '')
].join(' ');
}
});
}
function codeAddress() {
geocoder = new google.maps.Geocoder();
var address = document.getElementById("my-address").value;
geocoder.geocode({ 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
alert("Latitude: "+results[0].geometry.location.lat());
alert("Longitude: "+results[0].geometry.location.lng());
}
else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<input type="text" id="my-address">
<button id="getCords" onClick="codeAddress();">getLat&Long</button>
</body>
</html>
現在這也是一個autocomlpete功能，你可以在代碼中看到它會從輸入中獲取地址，並在輸入時通過API自動完成。
一旦你有你的地址點擊按鈕，你會根據需要通過警報得到你的結果。另請注意，它使用最新的API並加載'places'庫（當調用API使用'庫'參數時）。
希望這有助於，並閱讀文檔以獲取更多信息，歡呼聲。
編輯＃1：Fiddle
+1
是的，謝謝！ lat（）lng（）是完美的，因爲它似乎從請求變爲隨機請求，具有諸如「k」和「A」之類的實際屬性，或者像lat那樣的其他奇怪的屬性。你很聰明。 – 2014-03-11 21:31:38
+0
非常有幫助。你做了一個很棒的工作。感謝 – Randhir 2014-08-13 04:38:39
+0
這是否需要一個API密鑰？ – Supertecnoboff 2015-05-20 09:32:39
6
我希望這將是未來範圍更加有用包含自動完成谷歌API的功能與 緯度和經度
var latitude = place.geometry.location.lat();
var longitude = place.geometry.location.lng();
完整視圖
<!DOCTYPE html>
<html>
<head>
<title>Place Autocomplete With Latitude & Longitude </title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
#pac-input {
background-color: #fff;
padding: 0 11px 0 13px;
width: 400px;
font-family: Roboto;
font-size: 15px;
font-weight: 300;
text-overflow: ellipsis;
}
#pac-input:focus {
border-color: #4d90fe;
margin-left: -1px;
padding-left: 14px; /* Regular padding-left + 1. */
width: 401px;
}
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places"></script>
<script>
function initialize() {
var address = (document.getElementById('pac-input'));
var autocomplete = new google.maps.places.Autocomplete(address);
autocomplete.setTypes(['geocode']);
google.maps.event.addListener(autocomplete, 'place_changed', function() {
var place = autocomplete.getPlace();
if (!place.geometry) {
return;
}
var address = '';
if (place.address_components) {
address = [
(place.address_components[0] && place.address_components[0].short_name || ''),
(place.address_components[1] && place.address_components[1].short_name || ''),
(place.address_components[2] && place.address_components[2].short_name || '')
].join(' ');
}
/*********************************************************************/
/* var address contain your autocomplete address *********************/
/* place.geometry.location.lat() && place.geometry.location.lat() ****/
/* will be used for current address latitude and longitude************/
/*********************************************************************/
document.getElementById('lat').innerHTML = place.geometry.location.lat();
document.getElementById('long').innerHTML = place.geometry.location.lng();
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<input id="pac-input" class="controls" type="text"
placeholder="Enter a location">
<div id="lat"></div>
<div id="long"></div>
</body>
</html>
0
Ente通過自動完成的位置和所有字段的其餘部分：緯度和Longititude值自動填充。
與谷歌API密鑰
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
<link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
</head>
<body>
<textarea placeholder="Enter Area name to populate Latitude and Longitude" name="address" onFocus="initializeAutocomplete()" id="locality" ></textarea><br>
<input type="text" name="city" id="city" placeholder="City" value="" ><br>
<input type="text" name="latitude" id="latitude" placeholder="Latitude" value="" ><br>
<input type="text" name="longitude" id="longitude" placeholder="Longitude" value="" ><br>
<input type="text" name="place_id" id="location_id" placeholder="Location Ids" value="" ><br>
<script type="text/javascript">
function initializeAutocomplete(){
var input = document.getElementById('locality');
// var options = {
// types: ['(regions)'],
// componentRestrictions: {country: "IN"}
// };
var options = {}
var autocomplete = new google.maps.places.Autocomplete(input, options);
google.maps.event.addListener(autocomplete, 'place_changed', function() {
var place = autocomplete.getPlace();
var lat = place.geometry.location.lat();
var lng = place.geometry.location.lng();
var placeId = place.place_id;
// to set city name, using the locality param
var componentForm = {
locality: 'short_name',
};
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("city").value = val;
}
}
document.getElementById("latitude").value = lat;
document.getElementById("longitude").value = lng;
document.getElementById("location_id").value = placeId;
});
}
</script>
</body>
</html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//maps.googleapis.com/maps/api/js?libraries=places&key=API KEY"></script>
<script src="https://fonts.googleapis.com/css?family=Roboto:300,400,500></script>
相關問題
- 1. 獲取基於給定名稱的經度和緯度的API
- 2. 從Google地理定位API獲取當前經緯度和lng
- 3. 從不使用Google API的地址獲取經度和緯度
- 4. 在BingMap中獲取經度和緯度的位置名稱
- 5. 使用緯度和經度的位置名稱的Web服務
- 6. 如何使用HTML5地理定位或Google API獲取地址經緯度？
- 7. 如何通過使用緯度和經度值獲取位置名稱
- 8. 如何使用緯度和經度獲取位置名稱或城市？
- 9. 從php的經度和緯度獲取地區名稱
- 10. 從經緯度獲取位置地址
- 11. 獲取用戶位置的緯度經度與API 22
- 12. 谷歌地圖API返回地方'基於經度和緯度
- 13. 獲取基於城市，郵編或街道名稱的經度和緯度
- 14. 獲取地標的經度和緯度值 - Google地球
- 15. 如何獲取與Google地圖相同的Google Geocoder API幾何值（經度和緯度）URL經緯度值
- 16. 顯示位置使用經度/緯度座標 - Google地圖
- 17. 谷歌地圖api - 如何從緯度/經度獲取地方的名稱
- 18. 獲取基於距離和度數的經度緯度組合
- 19. 在Google Places API中嵌入當前位置（經度和緯度）
- 20. 如何通過編程或使用api獲取位置的緯度和經度
- 21. 獲取緯度和經度
- 22. 獲取經度和緯度
- 23. 使用javascript獲取緯度和經度
- 24. 基於經度和緯度計算最近位置的算法
- 25. 谷歌地圖API（附近獲得緯度經度位置）
- 26. 使用API查找已知位置的經度和緯度？
- 27. Google Maps地理編碼API - 處理來自用戶的緯度/經度輸入
- 28. 從城市名稱獲取經緯度
- 29. 從經緯度獲取城市名稱
- 30. 獲取當前位置的經緯度
http://maps.googleapis.com/maps/api/geocode/json?address=1600+Amphitheatre+Parkway,+Mountain+View,+更換API KEY CA＆sensor = true更多信息https://developers.google.com/maps/documentation/geocoding/ – zzart 2012-07-04 13:07:42