使用腾讯地图和js,html实现地理位置的获取
转自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实现地理位置的获取的更多相关文章
- 有关于腾讯地图服务端IP定位接口的获取当前城市的处理
接口说明:http://apis.map.qq.com/ws/location/v1/ip 说明里面写了ip可以缺省,然并卵,经过测试的到结果并不能获取到当前城市,理由是腾讯ip库的对应ip精度没有定 ...
- 腾讯地图JS API实现带方向箭头的线路Polyline
最近产品提出一个需求,在我们使用的腾讯地图上为线路polyline添加线路方向.例如下图所示: 查找腾讯地图JS API提供的API,没有找到对应的支持,询问负责腾讯地图的人也得到了同样的答案,即地图 ...
- 基于MySQL + Node.js + Leaflet的离线地图展示，支持百度、谷歌、高德、腾讯地图
1. 基本说明 本项目实现了离线展示百度.谷歌.高德.腾讯地图.主要功能如下: 实现了地图瓦片图下载.存储.目前支持存储至MySQL Node.js服务调用MySQL中的瓦片图 Leaflet展示地图 ...
- js 根据固定位置获取经纬度--腾讯地图
1.首先引入jq 和 腾讯地图js <script src="../js/jQuery.js"></script> <script charset=& ...
- 地图API使用文档-以腾讯地图为例
目录 腾讯地图API 2 1.API概览... 2 1.1 WebService API(官网注明是beta版本,可能不稳定,慎用):... 2 1.2 URL API:... 2 1.3 静态图AP ...
- vue2.0引入腾讯地图
百度很多东西,然后我没找到腾讯地图在VUE2.0里面的引用.于是根据找的其他地图引用资料进行尝试.步骤如下. 首先在src里面建立了TMap.js的文件,内容如下: export function T ...
- 腾讯地图 API 调用入门
本文仅为腾讯地图 API 调用入门,如需进阶学习,请在腾讯位置服务网站上进行学习. 登陆网址 https://lbs.qq.com/ 点击右上角的登陆按钮,需要进行注册按照流程进行就好. 完成之后,选 ...
- 微信小程序wx.getLocation()获取经纬度及JavaScript SDK调用腾讯地图API获取某一类地址
简介 腾讯位置服务为微信小程序提供了基础的标点能力.线和圆的绘制接口等地图组件和位置展示.地图选点等地图API位置服务能力支持,使得开发者可以自由地实现自己的微信小程序产品. 在此基础上,腾讯位置服务 ...
- php 腾讯地图和百度地图的相互转换
关于百度和腾讯地图坐标转换的问题,网上大多给的是JS实现的,而JS又是异步实现的,无法返回值,在有些应用场景下不好使用,这里我从腾讯论坛上找到了一个PHP转换的方法,贴出来分享给大家.经测试十分有效! ...
随机推荐
- 使用Python画一个带坐标轴的圆
Download Microsoft Visual Studio Microsoft Visual Studio enables you develop your python Application ...
- Java中语法与C/CPP的区别
static不能在成员方法中定义,只能作为类变量定义.
- slurm作业提交系统常用命令
写下自己的关于slurm感悟一二 与各人pc不同,slurm的基本架构是,一个中专节点,之后有很多局域网ip对应不同的计算节点,在中专节点敲命令,命令中可以指定需要用到哪些计算节点 1. 查看有哪些分 ...
- 不使用循环或递归判断一个数是否为3的幂（leetcode 326）
326. Power of ThreeGiven an integer, write a function to determine if it is a power of three. Follow ...
- SQL Server中的连接查询（内连接、外连接、交叉连接）
在数据库查询中,经常会用到两个有关联的表进行查询,需要把两个表中的数据按照某些条件查出来,这时就可以使用连接查询 连接查询分为三种:内连接.外连接和交叉连接 1. 内连接 内连接inner join ...
- 《DSP using MATLAB》Problem 7.27
代码: %% ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ %% Output In ...
- web方向编程语言最全对比
web方向编程语言最全对比 目前一般公司的后台用的开发语言大概有以下几种:java,python,php,asp.net,c++,node.js,ruby on rails 等. java 优点:性能 ...
- docker应用实例——httpd
docker可以用来创建虚拟环境跑应用,各个应用能起到隔离作用. 步骤也很简单,就是获取(下拉镜像)应用,然后进行安装就可以了 1.搜索镜像,比如我想虚拟一个httpd应用,可以看到,有httpd这个 ...
- 在kerberos认证过程中Active Directory的作用
LDAP介绍 1),ladp(Lightweight Directory Access Protocol),轻量级目录访问协议,提供被称为目录服务的信息服务,特别是基于X.500(构成全球分布式的目录 ...
- Python 反射(reflection)
反射是指通过字符串映射或修改程序运行时的状态.属性.方法, 有以下4个方法 1.getattr(object, name, default = None) 根据字符串获取 obj 对象里对应 str ...