js+html5获取用户地理位置信息并在Google地图上显示的方法
2015-06-05 00:00
1076 查看
本文实例讲述了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_UN***AILABLE: 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程序设计有所帮助。
相关文章推荐
- 简介JavaScript中valueOf()方法的使用
- js+html5绘制图片到canvas的方法
- JavaScript中length属性的使用方法
- 简介JavaScript中charAt()方法的使用
- js+HTML5实现canvas多种颜色渐变效果的方法
- js+html5通过canvas指定开始和结束点绘制线条的方法
- js+html5实现canvas绘制镂空字体文本的方法
- js+html5实现canvas绘制简单矩形的方法
- js+html5实现canvas绘制圆形图案的方法
- js实现点击链接后延迟3秒再跳转的方法
- JSP-Controller
- js--OOP浅谈
- ExtJS 4.2 03 Javascript 中的类
- JSON and Microsoft Technologies(翻译)
- 数据类型回顾——NaN和isNaN—JS学习笔记2015-6-4(第48天)
- [转载]js删除几种方式
- 不同JS环境use strict对重复属性处理的差异
- js跳转页面,谷歌和IE跳转页面不一样!
- JSON解析工具-org.json
- JavaScript概述