反向地理编码 [英] Reverse Geocoding Code
本文介绍了反向地理编码的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我一直在努力将Google地图中反向地理编码的Javavscript代码放在一起。我认为我已经解决了所有的问题，但我仍然遇到了问题。
I've been working on putting together the Javavscript code for Reverse Geocoding in Google maps. I thought I'd solved all the issues I had, but I'm still having problems.
当我将Javascript代码嵌入到HTML文件中时，它没有任何问题。然而，如果我尝试并运行javascript（有一些改动），作为一个单独的文件，地图在打开我的表单时加载，但是当我输入Lat和Lng坐标并按相关按钮来反转地理代码时，发生的一切
When I embed the Javascript code within the HTML file it works without any problems. However if I try and run the javascript (with some alterations), as a separate file, the map loads upon opening my form, but when I enter the Lat and Lng co-ordinates and press the relevant button to Reverse Geocode, all that happens is that the map is refreshed.
我已经将HTML文件与嵌入的JS代码相关联，然后单独的JS代码文件进行比较。
I've attached the HTML file with the JS code embed and then the separate JS code file to make a comparison.
嵌入Javascript的HTML文件
HTML file with embedded Javascript
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example: Reverse Geocoding</title>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var geocoder;
var map;
var infowindow = new google.maps.InfoWindow();
var marker;
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(40.730885,-73.997383);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: 'roadmap'
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
function codeLatLng() {
var lat = document.getElementById('Latitude').value;
var lng = document.getElementById('Longitude').value;
var latlng = new google.maps.LatLng(lat, lng);
geocoder.geocode({'latLng': latlng}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[1]) {
map.setZoom(11);
marker = new google.maps.Marker({
position: latlng,
map: map
});
var address= (results[1].formatted_address);
document.getElementById('Address').value= results[1].formatted_address;
infowindow.setContent(results[1].formatted_address);
infowindow.open(map, marker);
} else {
alert("No results found");
}
} else {
alert("Geocoder failed due to: " + status);
}
});
}
</script>
</head>
<body onLoad="initialize()">
<div>
<input name="Latitude" type="text" id="Latitude" size="16" maxlength="10" />
<input name="Longitude" type="text" id="Longitude" size="16" maxlength="10" />
<input name="Address" type="text" id="Address" size="55" />
</div>
<div>
<input type="button" value="Reverse Geocode" onClick="codeLatLng()">
</div>
<div id="map_canvas" style="height: 90%; top:60px; border: 1px solid black;"></div>
</body>
</html>
Javascript代码
Javascript Code
(function ReverseGeocode() {
//This is declaring the Global variables
var geocoder, map, marker;
//This is declaring the 'Geocoder' variable
geocoder = new google.maps.Geocoder();
window.onload = function() {
//This is creating the map with the desired options
var myOptions = {
zoom: 6,
center: new google.maps.LatLng(54.312195845815246,-4.45948481875007),
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
position: google.maps.ControlPosition.TOP_RIGHT
},
navigationControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.ZOOM_PAN,
position: google.maps.ControlPosition.TOP_LEFT
},
scaleControl: true,
scaleControlOptions: {
position: google.maps.ControlPosition.BOTTOM_LEFT
}
};
map = new google.maps.Map(document.getElementById('map'), myOptions);
var form = document.getElementById('SearchForLocationForm');
//This is getting the 'Latitude' and 'Longtiude' co-ordinates from the associated text boxes on the HTML form
var lat = document.getElementById('Latitude').value;
var lng = document.getElementById('Longitude').value;
//This is putting the 'Latitude' and 'Longitude' variables together to make the 'latlng' variable
var latlng = new google.maps.LatLng(lat, lng);
// This is making the Geocode request
geocoder.geocode({'latLng': latlng}, function(results, status) {
// This is checking to see if the Geoeode Status is OK before proceeding
if (status == google.maps.GeocoderStatus.OK) {
//This is placing the marker at the returned address
if (results[1]) {
// Creating a new marker and adding it to the map
map.setZoom(16);
marker = new google.maps.Marker({
map: map, draggable:true
});
}
var address= (results[1].formatted_address);
//This is placing the returned address in the 'Address' field on the HTML form
document.getElementById('Address').value= results[1].formatted_address;
}
}
);
};
})();
推荐答案
这是Khepri的简短版本（谢谢！ ）代码
This is the short version of Khepri's (thank you!) Code
function getReverseGeocodingData(lat, lng) {
var latlng = new google.maps.LatLng(lat, lng);
// This is making the Geocode request
var geocoder = new google.maps.Geocoder();
geocoder.geocode({ 'latLng': latlng }, function (results, status) {
if (status !== google.maps.GeocoderStatus.OK) {
alert(status);
}
// This is checking to see if the Geoeode Status is OK before proceeding
if (status == google.maps.GeocoderStatus.OK) {
console.log(results);
var address = (results[0].formatted_address);
}
});
}
这也是需要的，不要忘记在头上：
this is also needed, do not forget in head:
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
这篇关于反向地理编码的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
