移动端H5 腾讯地图sdk 当前位置 地址你解析 距离计算
2024-04-08 23:25:32
<template><view class="content"><view><input class="uni-input" placeholder="输入纬度" v-model="lat" /><input class="uni-input" placeholder="输入经度" v-model="lon" /><button @click="reverseGeocoder" style="width: 750rpx;">转化</button><view>位置：{{remark}}</view></view><button @click="onclick()">点击获取经纬度信息</button><br /><text>当前位置经度信息：{{longitude}}</text><text>当前位置维度信息：{{latitude}}</text></view>
</template><script>import QQMapWX from '@/common/qqmap-wx-jssdk.js'export default {data() {return {// 116.56086,39.774944lat: '39.774944',lon: '116.56086',qqMap: new QQMapWX({key: 'JF7BZ-OEYEU-OD2VS-2XALL-VOMDE-7MFNU',vm: this}),remark: undefined,longitude: '',latitude: ''}},onReady() {this.formSubmit();},methods: {formSubmit() {var _this = this;//调用距离计算接口this.qqMap.calculateDistance({//mode: 'driving',//可选值：'driving'（驾车）、'walking'（步行），不填默认：'walking',可不填//from参数不填默认当前地址//获取表单提交的经纬度并设置from和to参数（示例为string格式）// from: e.detail.value.start || '', //若起点有数据则采用起点坐标，若为空默认当前地址// to: e.detail.value.dest, //终点坐标// mode: "walking",from: "39.775272,116.554588", //当前位置的经纬度to: "39.780864,116.567515", //办公地点经纬度success: (res) => { //成功后的回调// debuggerconsole.log(res);let hw = res.result.elements[0].distance; //拿到距离(米)console.log("hw", hw);if (hw && hw !== -1) {if (hw < 1000) {hw = hw + "m";}//转换成公里else {hw = (hw / 2 / 500).toFixed(2) + "km";}} else {hw = "距离太近或请刷新重试";}console.log("当前位置与办公地点距离:" + hw);},});},// 接口调用说明onclick() {let _this = thisconsole.log("开始执行。。。");uni.getLocation({type: "gcj02",// type: "wgs84",geocode: true,success: (res) => {console.log("获取经纬度成功");_this.longitude = res.longitude;_this.latitude = res.latitude;console.log("当前位置的经度:", res.longitude);console.log("当前位置的纬度:", res.latitude);},// 此处新增测试fail: () => {console.log("获取经纬度失败");},complete: () => {// 解析地址this.qqMap.reverseGeocoder({location: {latitude: _this.latitude,longitude: _this.longitude,},success: function(res) {console.log("解析地址成功");console.log(res);// 省let province = res.result.ad_info.province;// 市let city = res.result.ad_info.city;// console.log(province);// console.log(city);},fail: function(res) {uni.showToast({title: "定位失败",duration: 2000,icon: "none",});console.log(res);},complete: function(res) {console.log(res);},});},// 新增end});},// 示例 经纬度转换位置描述reverseGeocoder() {let _this = thisthis.qqMap.reverseGeocoder({location: {latitude: _this.lat,longitude: _this.lon},success: (res) => {console.log(res)this.remark = res.result.address},fail: (res) => {console.error(res)}})},},}
</script><style>.content {display: flex;flex-direction: column;align-items: center;justify-content: center;}.logo {height: 200rpx;width: 200rpx;margin-top: 200rpx;margin-left: auto;margin-right: auto;margin-bottom: 50rpx;}.text-area {display: flex;justify-content: center;}.title {font-size: 36rpx;color: #8f8f94;}
</style>移动端H5 腾讯地图sdk 当前位置 地址你解析 距离计算相关推荐
- 移动端小程序 腾讯地图sdk 当前位置 地址你解析 距离计算
<template><view><!-- 顶部通知栏 --><view v-if="showtime" class="showt ...
- 小程序地图标点,h5腾讯地图标点,vue使用腾讯地图,腾讯地图自定义图标
很多项目都用到了腾讯地图,不管是小程序还是h5,记录一下使用过程! 1.先到腾讯地图官网点击注册注册登陆 准备工作 先到腾讯地图官网点击注册注册登陆 进入控制台申请key,根据自己的实际情况选择key ...
- H5使用百度地图SDK获取用户当前位置并且标记显示在地图
代码实现功能: H5使用百度地图SDK获取用户当前位置并且标记显示在地图,点击该标记弹出一层自定义的HTML. 效果图: 代码: <!DOCTYPE html> <html>& ...
- 地图 显示 动态轨迹_腾讯地图SDK全新版本上线，可满足开发者核心诉求
近日,由腾讯位置服务开发的SDK全新v4.3.0版本正式上线,新增了小车平滑移动.点聚合功能,内置墨渊模板适配暗色模式,动态路名等,可以帮助开发者更轻松地访问腾讯地图服务和数据,优化地图类的程序开发体 ...
- 腾讯小程序 java编写_微信小程序 使用腾讯地图SDK详解及实现步骤
微信小程序 使用腾讯地图SDK详解及实现步骤 近期在做一款彩票服务类项目中用到了腾讯地图提供的小程序解决方案,拿来给大家分享一下! 使用起来非常简单,就是一些功能还有待完善. 官方文档:http:// ...
- vue PC 端使用腾讯地图定位
vue PC 端使用腾讯地图定位 需求:希望网站显示当前城市 腾讯前端定位组件 解决的方法 定义一个文件,加载定位js 在vue页面中使用 需求:希望网站显示当前城市 腾讯前端定位组件 key的申请, ...
- 腾讯小程序php,微信小程序实现使用腾讯地图SDK步骤详细介绍
这篇文章微信小程序实现使用腾讯地图SDK步骤详细介绍的相关资料,需要的朋友可以参考下 微信小程序 使用腾讯地图SDK详解及实现步骤 近期在做一款彩票服务类项目中用到了腾讯地图提供的小程序解决方案,拿来 ...
- vue h5 腾讯地图路线规划
vue h5腾讯地图定位传送门 代码如下:在微信浏览器中会弹出是否打开第三方 点击取消则打开内置腾讯 点击去 则跳转腾讯地图app location.href = https://apis.map.q ...
- 微信小程序 使用腾讯地图SDK详解及实现步骤
信小程序 使用腾讯地图SDK详解及实现步骤 微信小程序JavaScript SDK: 官方文档:http://lbs.qq.com/qqmap_wx_jssdk/index.html 步骤: 1.申请 ...
最新文章
- Windows版 mysql 5.7.16安装
- 选择头秃还是植发？大数据告诉你植发行业水有多深？
- 从频率角度理解为什么深度可以加速神经网络的训练
- Python基础教程：__setattr__和__delattr__和__getattr__的用法
- 【SPSS】第十周-面板数据的线性回归
- HP server ILO
- 会声会影编辑面板常用功能介绍
- python在windows 比linux 慢,为什么python在Windows上这么慢？
- 原生ajax响应json数据
- linux安装谷歌浏览器（Chrome）
- host smbus controller not enabled解决方法（主机smbus控制器未启用）
- Flutter 开源社交电商项目Flutter_Mycommunity_App
- Ubuntu镜像名称解释
- 【Python基础学习一】在OSX系统下搭建Python语言集成开发环境 附激活码
- 如果我有一颗私人卫星……｜潮科技有奖问答评论精选 ②
- HTML基础笔记笔记
- 无人机c语言程序设计,c语言程序设计课程设计单元设计教案).pdf
- 两发两收信道估计方法
- 意派epub360 html 代码,《意派H5模板使用修改通用教程》
- 蓄热式加热炉热平衡、热效率分析与计算