移动端获取地理定位

来源:互联网 发布:有限元软件开发 编辑:程序博客网 时间:2024/05/31 13:14
<!DOCTYPE html><html> <head>     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">     <title>移动端获取地理定位</title>     <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">    <style>        * {            margin: 0;            padding: 0;            border: 0;        }        body {            width: 100%;            height: 100%;            text-align: center;        }        #btn-area button{        overflow: hidden;        padding:2%;        background: #009DDC;        border-radius: 5px;        color: #fff;        }            </style>    <script type="text/javascript" src="https://3gimg.qq.com/lightmap/components/geolocation/geolocation.min.js"></script></head><body><div id="btn-area">    <button id="botn" onClick="geolocation.getLocation(showPosition,showErr,options)">获取精确定位信息</button></div>    <script type="text/JavaScript">    //建立构造函数        var geolocation = new qq.maps.Geolocation("OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77", "myapp");        var options = {timeout: 8000};        //获取当前的定位信息成功        function showPosition(position) {        document.getElementById("botn").innerHTML=position.city+position.addr;        };        //获取当前的定位信息失败        function showErr() {           document.getElementById("botn").innerHTML="定位失败";        };    </script></body></html>

原创粉丝点击