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程序设计有所帮助。
相关文章
js和html5实现手机端刮刮卡抽奖效果完美兼容android/IOS
手机完美支持html5,所以如果手机端想要做个抽奖模块的话,用刮刮卡抽奖效果,相信这个互动体验是非常棒的,本人亲自完成,有错误请大家指出2013-11-11Layer UI表格列日期格式化及取消自动填充日期的实现方法
这篇文章主要介绍了Layer UI表格列日期格式化及取消自动填充日期的实现方法,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-05-05
最新评论