使用腾讯地图和js,html实现地理位置的获取
来源:互联网 发布:淘宝卖家林弯弯201 编辑:程序博客网 时间:2024/06/07 01:25
<!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>
1 0
- 使用腾讯地图和js,html实现地理位置的获取
- js,html获取当前地理位置
- js 获取详细地理位置 利用百度地图偏差的问题
- 微信公众号开发《三》微信JS-SDK之地理位置的获取,集成百度地图实现在线地图搜索
- 微信小程序创建之获取地理位置并跳转腾讯地图
- js获取地理位置的经纬度
- 基于百度地图的android地理位置获取
- 使用JS获取当前地理位置方法汇总
- 百度地图和谷歌地图使用的地理位置坐标标准以及转换
- 百度地图 经纬度和地理位置的转换
- pAdTy_3 构建地理位置和地图的应用程序
- 基于mAppWidget实现手绘地图(八)–获取用户地理位置
- 腾讯地图获取地址的经度和纬度
- 使用高德地图获取拍照图片地理位置
- android 用百度地图API获取经纬度和地理位置
- 百度地图API 地理位置获取和大头针显示当前位置
- js获取地理位置
- JS获取用户地理位置
- IntelliJ IDEA 2016 注册码
- 使用com.aspose.words将word模板转为PDF乱码解决方案(window下正常)
- Webpack2 完整踩坑教程(九)
- Android Volley完全解析(二),使用Volley加载网络图片
- 如何识别图像边缘?
- 使用腾讯地图和js,html实现地理位置的获取
- Win32 汇编子过程总结
- ORA-01861: 文字与格式字符串不匹配 以及 oracle日期怎么加一天?
- 获取文件路径和文件名、后缀名
- tableview 去除footer高度
- Nodejs+Express创建HTTPS服务器
- 关于PHP-SPL中SplDoublyLinkedList学习随记
- JS 中如何判断-undefined
- Android开发: The type ClipboardManager is deprecated