使用按钮单击而不是身体加载
Using button click instead of body onload
我正在尝试使用Google地理编码器API将用户的位置信息直接输入到表单中(反向地理编码)。我正在使用这篇文章中最受欢迎的答案作为代码库。
当我使用 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>
提前非常感谢。
更改以下内容:
<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()。那里似乎有一个错字。
看起来像一个错字:使用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()">
这是因为您在锚元素上使用 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提到的,还有一个错字。
相关文章:
- 将所选类别循环到ul>李用加载更多按钮
- 单击按钮时加载数据
- 单击按钮更改加载到表中的JSON文件
- 根据页面加载时的单选按钮选择显示某些字段
- 如何根据点击按钮重新加载我的谷歌图表
- 动态生成的html按钮无法加载页面
- jQuery .click 在动态加载按钮上不起作用
- 帧重新加载按钮
- 无法与使用 jQuery 的 jQuery 加载按钮交互
- 每当我按下后退按钮或重新加载按钮时,我的计时器都会重新启动.如何避免这种情况
- 导轨中的拉达加载按钮
- 如何停止页面重新加载按钮点击jquery
- 剑道UI移动加载按钮与javascript
- 如何绑定引导加载按钮成功/错误在表单提交
- Javascript - Won't工作为第二个日期范围/ Won't重新加载按钮按下
- 当用户单击停止加载按钮时发生的任何Javascript事件
- Valums qq.当FileUploader在ajax加载按钮后初始化时,它不工作
- 使用jQuery get动态加载按钮后,部分视图没有得到验证
- SilverStripe前端Ajax博客文章加载'按钮
- 如何通过javascript检测浏览器中是否按下了停止加载按钮