使用按钮单击而不是正文加载答案

【问题标题】：Using button click instead of body onload使用按钮单击而不是正文加载
【发布时间】：2012-05-09 05:36:42
【问题描述】：

我正在尝试使用 Google 地理编码器 API 将用户的位置信息直接输入到表单中（反向地理编码）。我使用this 帖子中最流行的答案作为代码库。

当我使用 body onload="initialize()" 时，我的表单已正确填充，如该答案所示。但是，当我尝试使用按钮启动该功能时，什么也没有发生（我删除了 body onload 属性）。我尝试了以下两种变体。

<a href="javascript:;" style="center" onclick="initiate()" class="button">Get Geolocation data</a>

<input type="button" value="Get Geolocation Data" onclick="initiate()">

有人可以指出我的错误吗？完整代码如下：

    <!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"/> 
<title>Reverse Geocoding</title> 

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript"> 
  var geocoder;

  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(successFunction, errorFunction);
} 
//Get the latitude and the longitude;
function successFunction(position) {
    var lat = position.coords.latitude;
    var lng = position.coords.longitude;
    codeLatLng(lat, lng)
}

function errorFunction(){
    alert("Geocoder failed");
}

  function initialize() {
    geocoder = new google.maps.Geocoder();



  }

  function codeLatLng(lat, lng) {

    var latlng = new google.maps.LatLng(lat, lng);
    geocoder.geocode({'latLng': latlng}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
      console.log(results)
        if (results[1]) {
         //formatted address
         alert(results[0].formatted_address)
        //find country name
             for (var i=0; i<results[0].address_components.length; i++) {
            for (var b=0;b<results[0].address_components[i].types.length;b++) {

            //there are different types that might hold a city admin_area_lvl_1 usually does in come cases looking for sublocality type will be more appropriate
                if (results[0].address_components[i].types[b] == "administrative_area_level_1") {
                    //this is the object you are looking for
                    city= results[0].address_components[i];
                    break;
                }
            }
        }
        //city data
        alert(city.short_name + " " + city.long_name)


        } else {
          alert("No results found");
        }
      } else {
        alert("Geocoder failed due to: " + status);
      }
    });
  }
</script> 
</head> 
<body onload="initialize()"> 

</body> 
</html>

非常感谢。

【问题讨论】：

标签： javascript html button onload

【解决方案1】：

改变这个：

<a href="javascript:;" style="center" onclick="initiate()" class="button">Get Geolocation data</a>

到这里：

<a href="javascript:initiate();return(false);" style="center" class="button">Get Geolocation data</a>

并确定你的函数是 initiate() 还是 initialize()。好像有错别字。

【讨论】：

【解决方案2】：

看起来像是一个错字：使用initialize 而不是initiate。

您声明您正在使用body onload="initialize()"，并且当您将对初始化函数的调用移动到按钮的 onclick 时，它停止工作。

但是，在您的示例中，您使用了 initiate:

<a href="javascript:;" style="center" onclick="initiate()" class="button">Get Geolocation data</a>

<input type="button" value="Get Geolocation Data" onclick="initiate()">

【讨论】：

谢谢迈克尔。这只是我发布此问题时的一个错字。

【解决方案3】：

那是因为您在锚元素上使用 onlick 而不停止其默认行为。试试这个。

<a href="#" style="center" onclick="return initialize()" class="button">Get Geolocation</a>

并从initialize js方法返回false。

function initiate() {
   geocoder = new google.maps.Geocoder();
   return false;
}

正如@Michael 所说，这里也有一个错字。

【讨论】：

这也是。最重要的是，他在onclick 属性中输入了initiate 而不是initialize。
除错字外，还需要停止默认行为。
谢谢尚卡尔。你的回答帮助我理解了我做错了什么。