所以;我正在开发此基于用户位置工作的Web应用程序。
查找坐标的部分和将这些坐标转换为地址的部分都可以单独工作。但是,第一个函数的变量似乎并没有转移到第二个函数,我也不知道为什么。
<!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" />
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
<script type="text/javascript">
var coordinates;
function getCoordinates(){
var options = {
enableHighAccuracy: true,
timeout: 4500,
maximumAge: 0
};
function success(pos) {
var crd = pos.coords;
console.log('Enlem : ' + crd.latitude);
console.log('Boylam: ' + crd.longitude);
console.log('Hata Payı ' + crd.accuracy + ' metre.');
coordinates = new google.maps.LatLng(crd.latitude, crd.longitude);
alert(coordinates);
return coordinates;
};
function error(err) {
console.warn('HATA(' + err.code + '): ' + err.message);
};
navigator.geolocation.getCurrentPosition(success, error, options);
}
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) {
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 () {
var latlng = getCoordinates();
alert(latlng);
GeoCode(latlng);
},
};
} ();
</script>
</head>
<body>
<div>
<input name="Address" type="text" id="Address" size="55" />
</div>
<div>
<input type="button" value="Adres Bul" onclick="ReverseGeocode.Init()">
</div>
<div id="map_canvas" style="height: 90%; top: 60px; border: 1px solid black;">
</div>
</body>
</html>
最佳答案
您的主要问题:getCoordinates()不返回坐标。因此,您不能像这样使用它:
var latlng = getCoordinates();
JavaScript有异步内容。这意味着需要花费一些时间来执行JavaScript。
javascript处理此问题的方式:发送请求,并提供回调(函数)。只要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" />
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
<script type="text/javascript">
// this function is triggered when geolocation has found coordinates
function geolocationReturnedCoordinates(coordinates) {
document.getElementById('log').innerHTML =
'lat: ' + coordinates.coords.latitude +
'<br>lng: ' + coordinates.coords.longitude +
'<br>accuracy: ' + coordinates.coords.accuracy;
// Here would be a good place to call Reverse geocoding, since you have the coordinates here.
GeoCode(new google.maps.LatLng(coordinates.coords.latitude, coordinates.coords.longitude));
}
// geocoder
geocoder = new google.maps.Geocoder();
function GeoCode(latlng) {
// This is making the Geocode request
geocoder.geocode({'location': latlng }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
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;
}
});
}
function search_position_and_address() {
// we start the request, to ask the position of the client
// we will pass geolocationReturnedCoordinates as the success callback
navigator.geolocation.getCurrentPosition(geolocationReturnedCoordinates, null, null);
}
</script>
</head>
<body>
<input type="button" value="GO" onclick="search_position_and_address()"> Get position (coordinates) of the client. -- Then look for the address
<div id="log"></div>
<input id="Address" placeholder="Address">
</body>
</html>
由您决定将其放回结构中。
我只是编译了最短的代码,让我明白了这一点。
还有函数的名称...我想指出一点。在现实生活中,您会选择一个较短的名称。