前端 定位组件

<!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 {
            position: absolute;
            width: 100%;
            height: 100%;
            text-align: center;
        }
        #pos-area {
            background-color: #009DDC;
            margin-bottom: 10px;
            width: 100%;
            overflow: scroll;
            text-align: left;
            color: white;
        }
        #demo {
            padding: 8px;
            font-size: small;
        }
        #btn-area {
            height: 100px;
        }
        button {
            margin-bottom: 10px;
            padding: 12px 8px;
            width: 42%;
            border-radius: 8px;
            background-color: #009DDC;
            color: white;
        }
    </style>
<script type="text/javascript" src="https://apis.map.qq.com/tools/geolocation/min?key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77&referer=myapp"></script>
</head>
<body>
    <div id="pos-area">
        <p id="demo">点击下面的按钮,获得对应信息:<br /></p>
    </div>

    <div id="btn-area">
        <button onClick="getCurLocation()">获取精确定位信息</button>
        <button onClick="geolocation.getIpLocation(showPosition, showErr)">获取粗糙定位信息</button>
        <button onClick="showWatchPosition()">开始监听位置</button>
        <button onClick="showClearWatch()">停止监听位置</button>
    </div>

    <script type="text/JavaScript">
        var geolocation = new qq.maps.Geolocation();

        document.getElementById("pos-area").style.height = (document.body.clientHeight - 110) + ‘px‘;

        var options = {timeout: 9000};
        var positionNum = 0;

        function getCurLocation() {
            geolocation.getLocation(showPosition, showErr, options);
        }    //成功的回调
        function showPosition(position) {
            positionNum ++;
            document.getElementById("demo").innerHTML += "序号:" + positionNum;
            document.getElementById("demo").appendChild(document.createElement(‘pre‘)).innerHTML = JSON.stringify(position, null, 4); // js json 转 字符串 json
            document.getElementById("pos-area").scrollTop = document.getElementById("pos-area").scrollHeight;
            var obj = JSON.parse( JSON.stringify(position, null, 4) );// 字符串 json 转 json 对象(数据)
            alert(obj.province + obj.city + obj.district) // 获取省市区
        };
    //失败回调
        function showErr() {
            positionNum ++;
            document.getElementById("demo").innerHTML += "序号:" + positionNum;
            document.getElementById("demo").appendChild(document.createElement(‘p‘)).innerHTML = "定位失败!";
            document.getElementById("pos-area").scrollTop = document.getElementById("pos-area").scrollHeight;
        };

     function showWatchPosition() {
         document.getElementById("demo").innerHTML += "开始监听位置!<br /><br />";
         geolocation.watchPosition(showPosition);
         document.getElementById("pos-area").scrollTop = document.getElementById("pos-area").scrollHeight;
     };

     function showClearWatch() {
         geolocation.clearWatch();
         document.getElementById("demo").innerHTML += "停止监听位置!<br /><br />";
         document.getElementById("pos-area").scrollTop = document.getElementById("pos-area").scrollHeight;
     };
    </script>
</body>
</html>

注意: 有跨域问题,最好降低浏览器的安全等级。

效果如下:

原文 及 详细说明: http://lbs.qq.com/tool/component-geolocation.html

时间: 2024-11-08 15:32:00

前端 定位组件的相关文章

jmgraph前端画图组件(html5版)

原文:jmgraph前端画图组件(html5版)      jmgraph是一个基于html5的WEB前端画图组件. 前端画图对象控件化,支持鼠标和健盘事件响应,可对单个控件样式设定,支持简单的动画处理.    可大大地简化前端画图. 如果ie请用ie9及以上浏览器 代码示例 1.创建jmgraph对象  2.创建样式渐变和阴影效果 渐变支持百分比,而且坐标都是相对于其父容器的.  3.创建控件创建一个中心为(250,250)半径为100的圆,这里可以指定radius或宽度来解定圆大小,弧度为满

几种前端定位方法对比

1.最老的HTML5 Geolocation,定位速度慢,而且经常定位不到,开GPS的情况下获取定位数据概率大,不建议使用这种方式 if (window.navigator.geolocation) { var options = { enableHighAccuracy: true, timeout: 3000, // 最长有效期,在重复获取地理位置时,此参数指定多久再次获取位置. maximumAge: 500 }; window.navigator.geolocation.getCurre

一枚前端UI组件库 KUI for Vue

一枚前端UI组件库 KUI for Vue 基于VUE 2.x 开发,在追求完美视觉体验的同时也保证了其性能高效. 欢迎批评.指正.吐槽.Star 和 捐助 文档 Docs: http://k-ui.xyz Blog: http://chuchur.com 特性 漂亮的UI,可定制主题 兼容IE9+ 组件丰富,功能强大 更新日志: Logs: http://vue.k-ui.xyz/log 安装 使用npm npm install kui-vue --save 使用CDN <!-- import

一枚前端UI组件库 KUI for React

一枚前端UI 组件库 for React 在追求完美视觉体验的同时也保证了其性能高效. 欢迎使用 .批评.指正.吐槽.Star? 特性 漂亮的UI,可定制主题 兼容IE9+ 组件丰富,功能强大 更新日志 logs:https://react.k-ui.cn/#/log 文档 Docs : https://react.k-ui.cn Github: https://gitee.com/chuchur/kui-react 安装 npm install react-kui 使用 ```js impor

基于AngularJS的个推前端云组件探秘

AngularJS是google设计和开发的一套前端开发框架,帮助开发人员简化前端开发的负担.AngularJS将帮助标准化的开发web应用结构并且提供了针对客户端应用的未来开发使用的模板,AngularJS非常全面且简单易学习,AngularJS快速的成为了javascript的主流框架,帮助开发者专业的从事web开发. 一.Amazing的Angular AnguarJS的一些特性 (1)方便的REST: RESTful逐渐成为了标准的服务器和客户端沟通的方式.使用一行javascript代

前端UI组件复用工具

"懒"是第一生产力. 代码复用总是程序员喜闻乐见的,前端组件化的最终目的就是复用,今天我们就将深入探讨如何实现UI组件的复用. 通常我们所说的组件往往是包含业务逻辑的前端组件,而这类组件实际上很难实现广义上的复用,顶多能在同一条业务线上复用一下,但UI组件就不一样了,没有了业务的约束,只在UI层面上实现复用,那想象空间就很大了,所以这里我们只讨论UI组件. 首先界定一下,UI组件就是一个web界面的前端代码片段,虽然说不包含业务,但基本的JS效果是可以有的,比如表单验证.轮播图效果.选

基于AngularJS的前端云组件最佳实践

AngularJS是google设计和开发的一套前端开发框架,他能帮助开发人员更便捷地进行前端开发.AngularJS是为了克服HTML在构建应用上的不足而设计的,它非常全面且简单易学习,因此AngularJS快速的成为了javascript的主流框架. 一.Amazing的Angular AnguarJS的特性 方便的REST: RESTful逐渐成为了一种标准的服务器和客户端沟通的方式.你只需使用一行javascript代码,就可以快速的从服务器端得到数据.AugularJS将这些变成了JS

一些前端框架组件化实现的比较(转)

转自:https://segmentfault.com/a/1190000005831159 第一次接触到前端组件的概念是在学习Extjs的时候,有一个名叫Ext.Component的对象,所有的组件都是继承自这个对象.Extjs有很多自带的组件,种类齐全,可以应对大部分后台页面的需求,而且实现了页面全部由组件组成的宏伟目标.组件的编写几乎都是靠JS,而弱化了HTML和CSS.虽然现在已经不用Extjs了但有机会一定要好好研究下它对组件概念的理解. 花了近一天的时间,用我认为比较主流的前端框架分

浅析前端定位position

A.有关position在实际应用中遇到最多的是relative(相对),absolute(绝对) 一般来说我们布局的话势必会离不开这个属性,当然也有人会问到有margin和padding,float不就已经够了么,其实在一开始初期设计页面的时候,我也是用这些属性,也很方便,让它向左就不可能会向右. B.但是在慢慢的使用过程中就会渐渐的发现,使用margin-left系列的东西时候会影响到兄弟节点的位置,是故未能按照自己的要求去实现某些业务,一般相对简单的定位我会选择这个,因为简单方便易懂.相对