uniapp 之定位当前位置 (uni.getLocation,腾讯地图,javascript)
第一种 uniapp
uniapp 封装的方法可以拿到城,市,县,经纬度。
实例:
//获取位置GetLOcation: function() {var that = this;uni.getLocation({type: 'gcj02',success: (res) => {console.log(res)var latitude = parseFloat(res.latitude);var longitude = parseFloat(res.longitude);}});},
官网地址:https://uniapp.dcloud.io/api/location/location?id=%e6%b3%a8%e6%84%8f
第二种: javascript iframe方法
下面的操作如果你是vue的就直接引入到index.html文件中。
如果是uni-app就比较麻烦了:
1.首先新建一个template.h5.html文件;
2.在manifest.json -> 源码视图 -> h5 -> 添加 “template” : “template.h5.html”
在创建文件中引入:
<iframe id="geoPage" width=0 height=0 frameborder=0 style="display:none;" scrolling="no"src="https://apis.map.qq.com/tools/geolocation?key=腾讯地图key&referer=myapp"></iframe>
在 body 中添加
<div v-html="str"></div>
在要使用的文件中添加下面代码:
var options = {enableHighAccuracy: true,maximumAge: 30000,timeout: 12000}window.locationCallback = function(err, position) {if (err) {showError(err);return;}showPosition(position);}this.str = '<iframe src="javascript:(function(){ ' +'window.navigator.geolocation.getCurrentPosition(' +'function(position){parent && parent.locationCallback && parent.locationCallback(null,position);}, ' +'function(err){parent && parent.locationCallback && parent.locationCallback(err);}, ' +'{enableHighAccuracy : ' + options.enableHighAccuracy + ', maximumAge : ' + options.maximumAge + ', timeout :' +options.timeout + '})' +';})()" style="display:none;"></iframe>';window.showPosition = function(position) {var lat = position.coords.latitude; //纬度var lag = position.coords.longitude; //经度// var lags = position.address.province;//城市名称// alert(lags)// alert('纬度:' + lat + ',经度:' + lon)}window.showError = function(error) {switch (error.code) {case error.PERMISSION_DENIED:alert('用户不允许地理定位!');break;case error.POSITION_UNAVAILABLE:alert('无法获取当前位置!');break;case error.TIMEOUT:alert('操作超时!');break;case error.UNKNOWN_ERROR:alert('未知错误!');break;}}
第三种: 腾讯地图
支持 浏览器,手机端,app 端目前不太支持。
先去腾讯地图官方申请 key 值 然后到项目中的 manifest.json 文件中的 h5 配置中添加你的腾讯地图 key值
腾讯地图 API 官方地址:https://lbs.qq.com/
在 项目中的 template.h5.html 文件中引入
<script charset="utf-8" src="https://3gimg.qq.com/lightmap/components/geolocation/geolocation.min.js"></script>
<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=腾讯开发者key值"></script>
应用实例:
let that = thisvar geolocation = new qq.maps.Geolocation("腾讯开发者 key 值", "myapp");var options = {timeout: 8000 //延时};// 定位成功之后调用的方法function showPosition(position) {console.log(position)let lat = position.lat;let lng = position.lng;}function showErr() {// alert('定位失败,请稍后重试');geolocation.getLocation(showPosition, showErr, options);//回调,如果获取定位失败,就重新来一次}geolocation.getLocation(showPosition, showErr, options);
uniapp 之定位当前位置 (uni.getLocation,腾讯地图,javascript)相关推荐
- uniapp 中APP端调用uni.getLocation偶尔获取不到address解决方法
uniapp 中APP端调用uni.getLocation偶尔获取不到address解决方法 1.配置geocode为true uni.getLocation({type: 'wgs84',geoco ...
- html5获取当前位置的api腾讯地图,腾讯地图JavaScript API调用
腾讯地图JavaScript API调用 1.加载地图 API 页面直接引入 https://map.qq.com/api/js?v=2.exp&key=OB4BZ-D4W3U-B7VVO-4 ...
- 小程序之定位签到打卡=>腾讯地图SDK
说明:文章部分内容及图片出自网络,如有侵权请与我本人联系(主页有公众号:小攻城狮学前端) 作者:小只前端攻城狮. 主页:小只前端攻城狮. 首发:掘金 GitHub:P-J27. CSDN:PJ想做前端 ...
- js 根据固定位置获取经纬度--腾讯地图
1.首先引入jq 和 腾讯地图js <script src="../js/jQuery.js"></script> <script charset=& ...
- 腾讯地图javascript API实现地图模糊搜索标记,经纬度输入及点击双向定位
// 模板部分 <el-row><el-col :span="1"><el-form-itemlabel="腾讯坐标"/>& ...
- 腾讯地图JavaScript API GL 版标记及输入经纬度反向定位(vue.js实现)
<template> <div><el-form-item label="经度" prop="longitude" >< ...
- php 获取key的位置,PHP使用腾讯地图获取指定地址坐标:创建key(图文+视频)
本篇文章主要给大家介绍PHP用腾讯地图获取指定地址坐标之创建key的步骤方法. 我们在项目开发过程中,有时可能会遇到用腾讯或百度地图接口获取相关数据的需求.那么对于PHP初学者来说,可能对相关知识不太 ...
- uniapp开发获取用户位置信息功能解析
uniapp开发获取用户位置信息功能解析 问题描述 uniapp相关接口 1.uni.authorize 提前向用户发起授权请求. 接口描述及demo演示 2.uni.getLocation 获取当前 ...
- uniapp使用腾讯地图实现定位,选点,距离计算和导航功能
HelloWorld 以下为官方文档指引: 申请开发者密钥(key):申请密钥 开通webserviceAPI服务:控制台 ->应用管理 -> 我的应用 ->添加key-> 勾 ...
最新文章
- 修改SQL SERVER内置存储过程
- 工作日总结: 2022-01-21
- 活久见!月薪30k的小程序全栈开发到底有多难?
- 安装tron_具有Tron效果的JavaFX 2 Form
- 征战多云时代,Nutanix这款Kubernetes多云PaaS新利器,你Get到了吗?
- python编程能有什么用_揭秘python都能做什么?
- selenium元素定位之 动态id, class元素定位
- Linq学习(零)-错误汇总
- 小米商城html_北京市发放新一批 170 万个消费券:京东、小米商城等平台可领
- SQL 宝典(本人总结供学习使用)
- QT学习资料博客:《Qt 实战一二三》和《Qt 学习之路 2》等
- C语言--职工信息管理系统(含论文)
- 西电电子线路实验课程设计通关模板
- 《web课程设计》期末网页制作 基于HTML+CSS+JavaScript制作公司官网页面精美
- U-Net - Convolutional Networks for Biomedical Image Segmentation论文翻译——中英文对照
- 搜索引擎技术优化原理及方法
- emule服务器无响应是什么原因,为什么,一直无响应,求大神帮忙
- python批量下载网易云音乐音乐列表
- ffmpeg视频剪切与拼接
- 基于Nginx的https服务(ssl证书制作)
热门文章
- 将批处理文件编译成可执行文件
- css里的padding什么意思,最详细的padding_css padding用法解析
- H3C Switch命令 配置VLAN
- 电磁场与电磁波实验三 熟悉Mathematica软件在电磁场领域的应用
- python人机交互界面设计_python_GUI页面开发
- 证件扫描电子版怎么弄?这个方法不要错过
- 全国计算机二级vb什么时候出来,关于全国计算机二级(VB)多少分可以过
- 计算机投标书开题报告,投标书开题报告.doc
- ***测试、电子取证系统 – Bugtraq-I
- 2022科大讯飞商品销量智能预测挑战赛—参赛总结