Javascript 反向地理编码
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6478914/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Reverse Geocoding Code
提问by IRHM
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.
我一直致力于在 Google 地图中为反向地理编码整合 Javascript 代码。我以为我已经解决了我遇到的所有问题，但我仍然遇到问题。
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 文件中嵌入 Javascript 代码时，它可以正常工作。但是，如果我尝试运行 javascript（有一些改动），作为一个单独的文件，地图会在打开我的表单时加载，但是当我输入 Lat 和 Lng 坐标并按下相关按钮进行反向地理编码时，所有这些都会发生就是地图刷新了。
I've attached the HTML file with the JS code embed and then the separate JS code file to make a comparison.
我附加了嵌入了 JS 代码的 HTML 文件，然后附加了单独的 JS 代码文件以进行比较。
HTML file with embedded Javascript
带有嵌入 Javascript 的 HTML 文件
<!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 Code
Javascript代码
(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;
}
}
);
};
})();
回答by Sebastian Viereck
This is the short version of Khepri's (thank you!) Code
这是 Khepri（谢谢！）代码的简短版本
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="https://maps.google.com/maps/api/js?sensor=false"></script>
回答by Khepri
I took what you had an modified it to something that functions for me...
我把你修改过的东西变成了对我有用的东西......
Html
html
<!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 src="/Scripts/test.js" type="text/javascript"></script>
</head>
<body onload="ReverseGeocode.Init()">
<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="ReverseGeocode.ReverseCode()">
</div>
<div id="map_canvas" style="height: 90%; top: 60px; border: 1px solid black;">
</div>
</body>
</html>
This would be my test.js code below
这将是我下面的 test.js 代码
var ReverseGeocode = function () {
//This is declaring the Global variables
var geocoder, map, marker;
//This is declaring the 'Geocoder' variable
geocoder = new google.maps.Geocoder();
function GeoCode(latlng) {
// This is making the Geocode request
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) {
//This is placing the marker at the returned address
if (results[0]) {
// Creating a new marker and adding it to the map
map.setZoom(16);
marker = new google.maps.Marker({
map: map, draggable: true
});
marker.setPosition(latlng);
map.panTo(latlng);
}
var address = (results[0].formatted_address);
//This is placing the returned address in the 'Address' field on the HTML form
document.getElementById('Address').value = results[0].formatted_address;
}
});
}
return {
Init: function () {
//This is putting the 'Latitude' and 'Longitude' variables
//together to make the 'latlng' variable
//var latlng = new google.maps.LatLng(lat, lng);
var latlng = new google.maps.LatLng(40.730885, -73.997383);
//This is creating the map with the desired options
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: 'roadmap'
}
map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
GeoCode(latlng);
},
ReverseCode: function () {
//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;
var latlng = new google.maps.LatLng(lat, lng);
GeoCode(latlng);
}
};
} (); // the parens here cause the anonymous function to execute and return
I basically replaced the window.onload handler you were using and set up the "object" with an init event that sets up the map initially. Then I just exposed a function that grabs the user entered lat/lng and called in to our geocode wrapper.
我基本上替换了您正在使用的 window.onload 处理程序，并使用初始设置地图的 init 事件设置“对象”。然后我只是公开了一个函数，它抓取用户输入的 lat/lng 并调用我们的地理编码包装器。
Should work with little modification (outside of copious amounts of error handling that I skipped :-p ) for you.
应该为您进行少量修改（除了我跳过的大量错误处理 :-p ）。
