Uncaught ReferenceError: lat is not defined
Possible Duplicate:
JavaScript Variable Scope
i have problem with my script, i want to get value lat, lng from pos function, but when i inspect element in console i get this error :
"Uncaught ReferenceError: lat is not defined TEST.html:30 (anonymous function)"
line 30 is : var latlng = new google.maps.LatLng (lat, lng); This is my full code :
<script type="text/javascript">
navigator.geolocation.getCurrentPosition (function (pos){
lat = pos.coords.latitude;
lng = pos.coords.longitude;
});
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
var latlng = new google.maps.LatLng (lat, lng);
var oceanBeach = new google.maps.LatLng(-6.2501199999999999,106.75937);
function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();
var mapOptions = {
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: latlng
}
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
directionsDisplay.setMap(map);
}
function calcRoute() {
var selectedMode = document.getElementById("mode").value;
var request = {
origin: latlng,
destination: oceanBeach,
// Note that Javascript allows us to access the constant
// using square brackets and a string value as its
// "property."
travelMode: google.maps.TravelMode[selectedMode]
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
}
</script>
You have at least two issues:
The scope of your variables (they are defined in a sub-function and not available in the scope in which you are trying to use them)
The getCurrentPosition() function is asynchronous. That means that it finishes some time AFTER you call it and is completed only when it calls the completion callback function. Thus, it has not yet finished at the time you try to use the results after your function call.
To handle getCurrentPosition() being asynchronous, you would have to do it like this:
navigator.geolocation.getCurrentPosition (function (pos){
var lat = pos.coords.latitude;
var lng = pos.coords.longitude;
var latlng = new google.maps.LatLng (lat, lng);
var oceanBeach = new google.maps.LatLng(37.7683909618184, -122.51089453697205);
// any further code that uses these variables
});
// no code here that uses the results of getCurrentPosition()
// because it has not completed yet
You can see a similar question and answer here: unable to cope with the asynchronous nature of navigator.geolocation
Would it be an issue if you write it like :
navigator.geolocation.getCurrentPosition (function (pos){
var lat = pos.coords.latitude;
var lng = pos.coords.longitude;
var latlng = new google.maps.LatLng (lat, lng);
var oceanBeach = new google.maps.LatLng(37.7683909618184, -122.51089453697205);
});
The reason it yells is because lat is defined in a different scope to the latlng and oceanBeach that is defined outside of the callback function, and it has no access to it there
UPDATE
Taking your situation into account, you can use a callback to solve your issues, ie doing something like making getCurrentPosition into its own function like :
function getCurrentLocation(callback) {
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(pos) {
var lat = pos.coords.latitude;
var lng = pos.coords.longitude;
callback(new google.maps.LatLng(lat,lng), new google.maps.LatLng(-6.2501199999999999,106.75937));
});
}
else {
throw new Error("Your browser does not support geolocation.");
}
}
and calling them with separate callbacks for each ie doing
getCurrentLocation(function(latlng,oceanBeach){
// work with latlng and ocean beach here
});
and now finally calling the function from each function ie
<script type="text/javascript">
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
function initialize() {
getCurrentLocation(function(latlng,oceanBeach){
directionsDisplay = new google.maps.DirectionsRenderer();
var mapOptions = {
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: latlng
}
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
directionsDisplay.setMap(map);
});
}
</script>
and using the same technique for calcRoute. Note : Instead of keeping directionsDisplay and directionsService global you should make this entire thing into a class,so that its cleaner, and more Object oriented
链接地址: http://www.djcxy.com/p/40830.html