转自http://blog.csdn.net/eele_one/article/details/64905218
<!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://3gimg.qq.com/lightmap/components/geolocation/geolocation.min.js"></script>

</head>

<body>

<div id="pos-area">

    <p id="demo">点击下面的按钮，获得对应信息：<br /></p>

</div>

<div id="btn-area">

    <button onclick="geolocation.getLocation(showPosition, showErr, options)">获取精确定位信息</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("OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77", "myapp");

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

    var positionNum = 0;

    var options = {timeout: 8000};

    function showPosition(position) {

        positionNum ++;

        document.getElementById("demo").innerHTML += "序号：" + positionNum;

        document.getElementById("demo").appendChild(document.createElement('pre')).innerHTML = JSON.stringify(position, null, 4);

        document.getElementById("pos-area").scrollTop = document.getElementById("pos-area").scrollHeight;

    };

    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>

使用腾讯地图和js,html实现地理位置的获取的更多相关文章

  1. 有关于腾讯地图服务端IP定位接口的获取当前城市的处理

    接口说明:http://apis.map.qq.com/ws/location/v1/ip 说明里面写了ip可以缺省,然并卵,经过测试的到结果并不能获取到当前城市,理由是腾讯ip库的对应ip精度没有定 ...

  2. 腾讯地图JS API实现带方向箭头的线路Polyline

    最近产品提出一个需求,在我们使用的腾讯地图上为线路polyline添加线路方向.例如下图所示: 查找腾讯地图JS API提供的API,没有找到对应的支持,询问负责腾讯地图的人也得到了同样的答案,即地图 ...

  3. 基于MySQL + Node.js + Leaflet的离线地图展示，支持百度、谷歌、高德、腾讯地图

    1. 基本说明 本项目实现了离线展示百度.谷歌.高德.腾讯地图.主要功能如下: 实现了地图瓦片图下载.存储.目前支持存储至MySQL Node.js服务调用MySQL中的瓦片图 Leaflet展示地图 ...

  4. js 根据固定位置获取经纬度--腾讯地图

    1.首先引入jq 和 腾讯地图js <script src="../js/jQuery.js"></script> <script charset=& ...

  5. 地图API使用文档-以腾讯地图为例

    目录 腾讯地图API 2 1.API概览... 2 1.1 WebService API(官网注明是beta版本,可能不稳定,慎用):... 2 1.2 URL API:... 2 1.3 静态图AP ...

  6. vue2.0引入腾讯地图

    百度很多东西,然后我没找到腾讯地图在VUE2.0里面的引用.于是根据找的其他地图引用资料进行尝试.步骤如下. 首先在src里面建立了TMap.js的文件,内容如下: export function T ...

  7. 腾讯地图 API 调用入门

    本文仅为腾讯地图 API 调用入门,如需进阶学习,请在腾讯位置服务网站上进行学习. 登陆网址 https://lbs.qq.com/ 点击右上角的登陆按钮,需要进行注册按照流程进行就好. 完成之后,选 ...

  8. 微信小程序wx.getLocation()获取经纬度及JavaScript SDK调用腾讯地图API获取某一类地址

    简介 腾讯位置服务为微信小程序提供了基础的标点能力.线和圆的绘制接口等地图组件和位置展示.地图选点等地图API位置服务能力支持,使得开发者可以自由地实现自己的微信小程序产品. 在此基础上,腾讯位置服务 ...

  9. php 腾讯地图和百度地图的相互转换

    关于百度和腾讯地图坐标转换的问题,网上大多给的是JS实现的,而JS又是异步实现的,无法返回值,在有些应用场景下不好使用,这里我从腾讯论坛上找到了一个PHP转换的方法,贴出来分享给大家.经测试十分有效! ...

随机推荐

  1. git教程：管理修改

    转载:管理修改 现在,假定你已经完全掌握了暂存区的概念.下面,我们要讨论的就是,为什么Git比其他版本控制系统设计得优秀,因为Git跟踪并管理的是修改,而非文件. 你会问,什么是修改?比如你新增了一行 ...

  2. 【Linux】scp指令

    语法: scp [可选参数] file_source file_target 参数说明: -1: 强制scp命令使用协议ssh1 -2: 强制scp命令使用协议ssh2 -4: 强制scp命令只使用I ...

  3. HTTP Post multipart/form-data支持

    最近需要向平台发送录像文件,但是Skynet没有multipart/form-data的Post请求支持,写篇blog记录一下 skynet有自带简单的httpc,里面有post方法.但是这个post ...

  4. 最详细的 linux grep命令教程

    简介 grep (global search regular expression(RE) and print out the line,全面搜索正则表达式并把行打印出来)是一种强大的文本搜索工具,它 ...

  5. Codeforces1099D.Sum in the tree（贪心）

    题目链接:传送门 思路: 一个节点放的数越大,那么以它为根的子树的节点权值之和就越小. 所以我们要在合法的范围内,使偶数层节点的权值尽可能地大.也就是说,令它的权值是子节点的最小值,这样保证了它的子节 ...

  6. 12集合（2）-----Set

    一.总体分类 Collection(包括方法add,remove,contains,clear,size) List(接口) LinkedList ArrayList Vector---Stack 2 ...

  7. python_ 函数

    函数是啥? 函数能提高应用的模块性,和代码的重复利用率 函数特点? 1 代码块以 def 关键词开头,后接函数名和圆括号() 2 任何传入参数和自变量必须放在圆括号中间 3 函数以冒号开始,并且缩进 ...

  8. js中数组常用方法总结

    操作数组 印象中数组有很多方法,系统的整理一下,放在自己家里方便回头查~ Array.map() 此方法是将数组中的每个元素调用一个提供的函数,结果作为一个新的数组返回,并没有改变原来的数组 1 2 ...

  9. PXE高效能批量网络装机

    PXE简绍 PXE(preboot execute environment,预启动执行环境)是由Intel公司开发的最新技术,工作于Client/Server的网络模式,支持工作站通过网络从远端服务器 ...

  10. sql sever 2012重装数据库时，出现cannot find one or more components, Please reinstall the application.解决方法

    错误原因: 由于我将SQL数据库做了删除,重装.在删除的过程中,不小心删除了某个SQL的插件,导致了这种问题的出现. 当我们去操作工具时,也会提示以上错误. 解决办法: 1)去控制面板--所有控制面板 ...