js+html5获取用户地理位置信息并在Google地图上显示的方法
更新时间：2015年06月05日 11:52:44 作者：pythoner
这篇文章主要介绍了js+html5获取用户地理位置信息并在Google地图上显示的方法,涉及html5元素的操作技巧,需要的朋友可以参考下
本文实例讲述了js+html5获取用户地理位置信息并在Google地图上显示的方法。分享给大家供大家参考。具体实现方法如下：
<!DOCTYPE html>
<html>
<body>
<p id="demo">Click the button to get your position:</p>
<button onclick="getLocation()">Try It</button>
<div id="mapholder"></div>
<script>
var x=document.getElementById("demo");
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(showPosition,showError);
}
else{x.innerHTML="Geolocation is not supported by this browser.";}
}
function showPosition(position)
{
var latlon=position.coords.latitude+","+position.coords.longitude;
var img_url="http://maps.googleapis.com/maps/api/staticmap?center="
+latlon+"&zoom=14&size=400x300&sensor=false";
document.getElementById("mapholder").innerHTML="<img src='"+img_url+"' />";
}
function showError(error)
{
switch(error.code)
{
case error.PERMISSION_DENIED:
x.innerHTML="User denied the request for Geolocation."
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML="Location information is unavailable."
break;
case error.TIMEOUT:
x.innerHTML="The request to get user location timed out."
break;
case error.UNKNOWN_ERROR:
x.innerHTML="An unknown error occurred."
break;
}
}
</script>
</body>
</html>
希望本文所述对大家的web程序设计有所帮助。
相关文章
jQuery 使用 $ 符号作为 jQuery 的简介方式。某些其他 JavaScript 库中的函数（比如 Prototype）同样使用 $ 符号。2011-04-04
检测是否已安装 .NET Framework 3.5的js脚本
管理员必须首先确认存在 .NET Framework 3.5 运行库，然后才能将 Windows Presentation Foundation (WPF) 应用程序部署在面向 .NET Framework 3.5 的系统上。2009-02-02
这篇文章主要给大家介绍了如何增强vscode中js代码提示功能的相关资料，文中通过示例代码介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面跟着小编一起来学习学习吧。2017-07-07
这篇文章主要介绍了微信小程序实现页面分享onShareAppMessage，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-08-08
主要是提前定义了很多文字，这样的方法不是很是，如果库中没有这个词，是看不到相关信息的。2009-12-12
最近在写插件的过程中，需要使用 JS 判断是否有滚动条，搜了一下，大致方法都差不多，但都有些啰嗦，代码不够简洁。最终通过参考不同方法，写了一个比较简单的方法2018-04-04
这篇文章主要介绍了js中匿名函数的创建与调用方法,详细分析了匿名函数的原理与用法,以及闭包的原理分析,非常具有实用价值,需要的朋友可以参考下2014-12-12
这篇文章主要介绍了JavaScript错误处理操作,结合实例形式分析了javascript常见的错误类型、错误处理语句以及相关使用技巧,需要的朋友可以参考下2019-01-01
这篇文章主要介绍了js数组中如何随机取出一个值,需要的朋友可以参考下2014-06-06
JavaScript判断一个字符串是否包含指定子字符串的方法
这篇文章主要介绍了JavaScript判断一个字符串是否包含指定子字符串的方法,实例分析了javascript字符串操作的技巧,非常具有实用价值,需要的朋友可以参考下2015-03-03
最新评论