2013-12-23 4 views
-1

Я использую случайный генератор пользователей, чтобы получать почтовый индекс каждый раз, когда я нажимаю кнопку. И это прекрасно работает. Но когда я пытаюсь отправить zipcode на google maps geolocation, я получаю:Ошибка Javascript при преобразовании zipcode в latlng в google maps

Uncaught ReferenceError: zipcode is not defined script.js:22 

Любая помощь?

Index.html

<!DOCTYPE html> 
<html> 
    <head> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
    <link rel="stylesheet" type="text/css" href="css/style.css"/> 
    <script type="text/javascript" src="js/jquery.js"></script> 
    <script type="text/javascript" 
     src="https://maps.googleapis.com/maps/api/js?v&sensor=false"> 
    </script> 
    <script type="text/javascript"> 

     function initialize() { 
     var mapOptions = { 
      center: new google.maps.LatLng(16.4706001, -33.6728973), 
      zoom:3, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 
     var map = new google.maps.Map(document.getElementById("map-canvas"), 
      mapOptions);  
     } 
     google.maps.event.addDomListener(window, 'load', initialize); 

    </script> 
    </head> 
    <body> 

    <div id="map-canvas"></div> 

    <div id="button"> 
     <button id="loadbutton">Click to Load</button> 
    </div> 

    <script type="text/javascript" src="js/script.js"></script> 
    </body> 
</html> 

script.js

var randomuserURL = 'http://api.randomuser.me/'; 

var myButton = document.getElementById('loadbutton'); 
myButton.onclick = loadAJAX; 

function loadAJAX() { 
    var zipcode; 
    $.ajax({ 
     url: randomuserURL, 
     dataType: 'json', 
     success: function(data){ 
     zipcode = data.results[0].user.location.zip; 
     } 
    }); 

    latlng(); 
} 

function latlng() { 
    var lat = ''; 
    var lng = ''; 
    var address = zipcode; 
    geocoder.geocode({ 'address': address}, function(results, status) { 
     if (status == google.maps.GeocoderStatus.OK) { 
      lat = results[0].geometry.location.lat(); 
      lng = results[0].geometry.location.lng(); 
     } else { 
      alert("Geocode was not successful for the following reason: " + status); 
     } 
    }); 
    alert('Latitude: ' + lat + ' Logitude: ' + lng); 
} 
+1

Вам нужно определить 'zipcode' в глобальном масштабе , а не в функции. – putvande

ответ

0

Попробуйте

function loadAJAX() { 
    var zipcode; 
    $.ajax({ 
     url: randomuserURL, 
     dataType: 'json', 
     success: function (data) { 
      zipcode = data.results[0].user.location.zip; 
      latlng(zipcode); 
     } 
    }); 
} 

И

function latlng(zipcode) { 
............ 
........... 
} 
+0

Это тоже хорошее решение;) – putvande

+0

Спасибо, что сработал. Но ошибок в моем коде слишком много. Прямо сейчас я исправил переменную области видимости, а затем определил «var geocode = new google.maps.Geocoder();« И, наконец, работает, но теперь с первого щелчка я получаю «ZERO_RESULTS» ​​и со второго щелчка Я получаю широту и долготу – user3062745

+0

Также, когда я перехожу на Google Maps и ищу с помощью zipcode, мне нужно искать дважды в первый раз, когда я ставлю zipcode. Надеюсь, эта помощь. – user3062745

1

Вы определяете ваш zipcode в первой функции и пытается получить доступ к нему в другой, где эта переменная не известна. Вам нужно разместить переменную zipcode в глобальной области действия, чтобы другие функции могли получить к ней доступ.

И указал Эшли Медуэй: latlng() должен быть запущен в функции success. Это связано с тем, что AJAX является асинхронным и может не завершиться при запуске функции.

var randomuserURL = 'http://api.randomuser.me/'; 
var zipcode; 
var myButton = document.getElementById('loadbutton'); 
myButton.onclick = loadAJAX; 

function loadAJAX() { 
    $.ajax({ 
     url: randomuserURL, 
     dataType: 'json', 
     success: function (data) { 
      zipcode = data.results[0].user.location.zip; 

      latlng(); 
     } 
    }); 

} 

function latlng() { 
    var lat = ''; 
    var lng = ''; 
    var address = zipcode; 
    geocoder.geocode({ 
     'address': address 
    }, function (results, status) { 
     if (status == google.maps.GeocoderStatus.OK) { 
      lat = results[0].geometry.location.lat(); 
      lng = results[0].geometry.location.lng(); 
     } else { 
      alert("Geocode was not successful for the following reason: " + status); 
     } 
    }); 
    alert('Latitude: ' + lat + ' Logitude: ' + lng); 
} 

Кроме того, вы, возможно, потребуется определить var geocoder = new google.maps.Geocoder(); и включают <script src="https://maps.googleapis.com/maps/api/js?v=3&sensor=false"></script>

+0

также должно появиться 'latlng()' в блоке успеха, так как ajax-код является асинхронным –

+0

Я исправил переменную scope и включил latlng() в успех, но теперь я получаю «геокодер не определен». Геокодер - это вызов Google Maps. Любой ключ, как это исправить? – user3062745

+0

См. Мой обновленный ответ. – putvande

Смежные вопросы