如何从Google Maps JavaScript地理编码器返回经度和纬度？ [英] How do I return a longitude and latitude from Google Maps JavaScript geocoder?
本文介绍了如何从Google Maps JavaScript地理编码器返回经度和纬度？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
当我使用下面的代码提醒一个空白值？为什么会这样？
HTML
< body onload =初始化（）>
< div id =map_canvasstyle =width：320px; height：480px;>< / div>
< div>
< input id =addresstype =textboxvalue =Sydney，NSW>
< input type =buttonvalue =Encodeonclick =display（）>
< / div>
< / body>
JavaScript
var geocoder;
var map;
函数initialize（）{
geocoder = new google.maps.Geocoder（）;
var latlng = new google.maps.LatLng（-34.397,150.644）;
var myOptions = {
zoom：8，
center：latlng，
mapTypeId：google.maps.MapTypeId.ROADMAP
}
map = new google .maps.Map（document.getElementById（map_canvas），myOptions）;
}
函数codeAddress（）{
var address = document.getElementById（address）。value;
var loc = [];
geocoder.geocode（{'address'：address}，function（results，status）{
if（status == google.maps.GeocoderStatus.OK）{
loc [0] = results [0] .geometry.location.lat（）;
loc [1] = results [0] .geometry.location.lng（）;
} else {
alert（Geocode未成功，原因如下：+ status）;
}
}）;
返回loc;
}
函数display（）{
var long_lat = codeAddress（）;
alert（long_lat）;
解决方案
因为你的函数<$ c执行$ c> codeAddress ，将空数组分配给loc，执行对Google地理编码器的异步请求，并返回loc，因为它的真实值是在Google响应时分配的。换句话说，allert应该在响应处理程序中：
var geocoder;
var map;
函数initialize（）{
geocoder = new google.maps.Geocoder（）;
var latlng = new google.maps.LatLng（-34.397,150.644）;
var myOptions = {
zoom：8，
center：latlng，
mapTypeId：google.maps.MapTypeId.ROADMAP
}
map = new google .maps.Map（document.getElementById（map_canvas），myOptions）;
}
函数codeAddress（）{
var address = document.getElementById（address）。value;
var loc = [];
//下一行创建异步请求
geocoder.geocode（{'address'：address}，function（results，status）{
//这是进程响应
if（status == google.maps.GeocoderStatus.OK）{
loc [0] = results [0] .geometry.location.lat（）;
loc [1] =结果[0] .geometry.location.lng（）;
alert（loc）; // loc包含地理编码坐标的地方
} else {
警报（地理编码不成功，原因如下：+状态）;
}
}）;
//相当无意义，因为它总是[]
//这行在创建AJAX请求后立即执行，但在响应之后不会执行
return loc;
}
function display（）{
codeAddress（）;
}
这就是AJAX的工作原理......在回调处理程序中处理结果如果你想分开地理编码和'显示'，你可以在处理程序中执行显示函数：
b
函数codeAddress（）{
var address = document.getElementById（address）。value;
geocoder.geocode（{'address'：address}，function（results，status）{
if（status == google.maps.GeocoderStatus.OK）{
var loc = []; //现在不需要在外部函数中定义它
loc [0] = results [0] .geometry.location.lat（）;
loc [1] = results [0 ] .geometry.location.lng（）;
display（loc）;
} else {
alert（地理编码不成功，原因如下： +状态）;
}
}）;
}
function display（long_lat）{
alert（long_lat）;
html：
< input type =buttonvalue =Encodeonclick =codeAddress（）>
您可以使其更加通用，如果您将地理编码只显示。然后你可以定义回调为
codeAddress 函数的参数： 函数codeAddress （回调）{
...
geocoder.geocode（{'address'：address}，function（results，status）{
...
callback（loc）; //代替显示（loc）;
...
}
...
}
codeAddress（display）; //执行地理编码
When I use the code below its alerting a blank value? why is that?
HTML
<body onload="initialize()">
<div id="map_canvas" style="width: 320px; height: 480px;"></div>
<div>
<input id="address" type="textbox" value="Sydney, NSW">
<input type="button" value="Encode" onclick="display()">
</div>
</body>
JavaScript
var geocoder;
var map;
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
function codeAddress() {
var address = document.getElementById("address").value;
var loc=[];
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
loc[0]=results[0].geometry.location.lat();
loc[1]=results[0].geometry.location.lng();
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
return loc;
}
function display(){
var long_lat=codeAddress();
alert(long_lat);
}
解决方案
because your function codeAddress is executed, assigning empty array to loc, executing asynchronous request to google geocoder and returns loc, which is empty, because its real value is assigned when response from google comes. In other words, allert should be inside response handler:
var geocoder;
var map;
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
function codeAddress() {
var address = document.getElementById("address").value;
var loc=[];
// next line creates asynchronous request
geocoder.geocode( { 'address': address}, function(results, status) {
// and this is function which processes response
if (status == google.maps.GeocoderStatus.OK) {
loc[0]=results[0].geometry.location.lat();
loc[1]=results[0].geometry.location.lng();
alert( loc ); // the place where loc contains geocoded coordinates
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
// pretty meaningless, because it always will be []
// this line is executed right after creating AJAX request, but not after its response comes
return loc;
}
function display(){
codeAddress();
}
this is how AJAX works... process results in callback handlers.
if you want to separate geocoding and 'dispalying' you can execute display function inside handler:
function codeAddress() {
var address = document.getElementById("address").value;
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var loc=[]; // no need to define it in outer function now
loc[0]=results[0].geometry.location.lat();
loc[1]=results[0].geometry.location.lng();
display( loc );
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
function display( long_lat ){
alert(long_lat);
}
html:
<input type="button" value="Encode" onclick="codeAddress()">
you can make it even more generic, if you will geocode not only to display. Then you can define callback as parameter to
codeAddress function:function codeAddress( callback ) {
...
geocoder.geocode( { 'address': address}, function(results, status) {
...
callback( loc ); // instead of dispaly( loc );
...
}
...
}
codeAddress( display ); // to execute geocoding
这篇关于如何从Google Maps JavaScript地理编码器返回经度和纬度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
