Question

我每次点击按钮时都会使用随机用户生成器来获取邮政编码。这很好。但是，当我尝试将邮政编码发送到谷歌地图地理位置时，我得到：

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);
}

Answer 1

您在第一个函数中定义zipcode并尝试在另一个函数中访问它，其中变量未知。您需要将zipcode变量放在全局范围内，以便其他函数也可以访问它。

Ashley Medway指出：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>

Answer 2

试试这个

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

并在

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

在谷歌地图中将zipcode转换为latlng时出现Javascript错误

2 个答案: