uniapp中h5使用地图

export function loadTMap(key) {return new Promise(function(resolve, reject) {window.init = function() {// resolve(qq) //注意这里resolve(TMap) //注意这里}var script = document.createElement("script");script.type = "text/javascript";// script.src = "http://map.qq.com/api/js?v=2.exp&callback=init&key=" + key;script.src = "https://map.qq.com/api/gljs?v=1.exp&callback=init&libraries=geometry&key=" + key;script.onerror = reject;document.head.appendChild(script);})}
<template><view><view id="container"></view><view v-for="(item,index) in points" :key="index">{{item.description}}-{{ item.address }} <button @click="sign(item)" :disabled="item.isCheckIn">{{item.isCheckIn?"已签到":"签到"}}</button><button @click="navigateTo(item)" v-if="!item.isCheckIn">导航</button></view></view>
</template><script>
import { loadTMap } from '../../utils/TMap';export default {data() {return {TMap:null,longitude:0,latitude:0,points:[{longitude:104.1483,latitude:30.634763,description:"东站活动",isCheckIn:false,address:"东站"},{longitude:104.17290686,latitude:30.595694765,description:"活动1",isCheckIn:false,address:"123"}]};},methods:{navigateTo(item){uni.openLocation({latitude: item.latitude,longitude: item.longitude,scale:18,success: function () {console.log('success');},fail(err) {console.log("打开地图失败",err)}});},sign(item){console.log(this.latitude,this.longitude)console.log(item,"item",this.TMap)if(this.TMap){var point01 = new this.TMap.LatLng(this.latitude,this.longitude)var point02 = new this.TMap.LatLng(item.latitude,item.longitude)var path = [point01,point02]var distance = this.TMap.geometry.computeDistance(path);console.log('计算出的距离:' + distance);if(Math.floor(distance) < 200){item.isCheckIn = trueuni.showToast({title:"签到成功"})}else{uni.showToast({title:"签到失败,距离"+distance,icon:"error"})}}// new this.TMap.Map("container")}},onLoad() {let that = thisuni.getLocation({// type: 'gcj02',type: 'wgs84',success: function (res) {console.log('当前位置的经度:' + res.longitude);console.log('当前位置的纬度:' + res.latitude);that.longitude = res.longitudethat.latitude = res.latitudeloadTMap("地图密钥").then(TMap=>{that.TMap = TMapvar map = new TMap.Map(document.getElementById("container"), {// 地图的中心地理坐标。// center: new TMap.LatLng(30.634763, 104.1483),center: new TMap.LatLng(that.latitude, that.longitude),zoom: 11});console.log(TMap,"qq")		var markerLayer = new TMap.MultiMarker({map:map,styles: {//创建一个styleId为"myStyle"的样式(styles的子属性名即为styleId)"myStyle": new TMap.MarkerStyle({ "width": 25,  // 点标记样式宽度(像素)"height": 35, // 点标记样式高度(像素)"src": '/static/logo.png',  //图片路径//焦点在图片中的像素位置,一般大头针类似形式的图片以针尖位置做为焦点,圆形点以圆心位置为焦点"anchor": { x: 16, y: 32 }  }) },//点标记数据数组geometries: [{"id": "1",   //点标记唯一标识,后续如果有删除、修改位置等操作,都需要此id"styleId": 'myStyle',  //指定样式id  104.1483"position": new TMap.LatLng(30.634763, 104.1483),  //点标记坐标位置"properties": {//自定义属性"title": "marker1"}}, {//第二个点标记"id": "2","styleId": 'marker',"position": new TMap.LatLng(39.994104, 116.287503),"properties": {"title": "marker2"}}]})})},fail:function(err){console.log(err,"err")},complete(res) {console.log(res,"res")}});}}
</script><style lang="scss">#container {/*地图(容器)显示大小*/// width: 1200px;width: 100%;height: 400px;}
</style>

问题: 部署到线上之后,,计算距离不准

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/66671.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

软件系统安全逆向分析-混淆对抗

1. 概述 在一般的软件中&#xff0c;我们逆向分析时候通常都不能直接看到软件的明文源代码&#xff0c;或多或少存在着混淆对抗的操作。下面&#xff0c;我会实践操作一个例子从无从下手到攻破目标。 花指令对抗虚函数表RC4 2. 实战-donntyousee 题目载体为具有漏洞的小型软…

#渗透测试#网络安全# 一文了解什么是跨域CROS!!!

免责声明 本教程仅为合法的教学目的而准备&#xff0c;严禁用于任何形式的违法犯罪活动及其他商业行为&#xff0c;在使用本教程前&#xff0c;您应确保该行为符合当地的法律法规&#xff0c;继续阅读即表示您需自行承担所有操作的后果&#xff0c;如有异议&#xff0c;请立即停…

ClickHouse vs StarRocks 选型对比

一、面向列存的 DBMS 新的选择 Hadoop 从诞生已经十三年了&#xff0c;Hadoop 的供应商争先恐后的为 Hadoop 贡献各种开源插件&#xff0c;发明各种的解决方案技术栈&#xff0c;一方面确实帮助很多用户解决了问题&#xff0c;但另一方面因为繁杂的技术栈与高昂的维护成本&…

Win11家庭版转专业版

Win11家庭版转专业版&#xff08;亲测有效&#xff09; 第一步 【断网】输入这个密钥&#xff1a; R8NJ8-9X7PV-C7RCR-F3J9X-KQBP6 第二步 点击下一步会自动重启 第三步 【联网】输入这个密钥&#xff1a; F3NWX-VFMFC-MHYYF-BCJ3K-QV66Y 注意 两次输入密钥的地方一致 …

IP 地址与蜜罐技术

基于IP的地址的蜜罐技术是一种主动防御策略&#xff0c;它能够通过在网络上布置的一些看似正常没问题的IP地址来吸引恶意者的注意&#xff0c;将恶意者引导到预先布置好的伪装的目标之中。 如何实现蜜罐技术 当恶意攻击者在网络中四处扫描&#xff0c;寻找可入侵的目标时&…

【Word_笔记】Word的修订模式内容改为颜色标记

需求如下&#xff1a;请把修改后的部分直接在原文标出来&#xff0c;不要采用修订模式 步骤1&#xff1a;打开需要转换的word后&#xff0c;同时按住alt和F11 进入&#xff08;Microsoft Visual Basic for Appliations&#xff09; 步骤2&#xff1a;插入 ---- 模块 步骤3&…

[0405].第05节:搭建Redis主从架构

Redis学习大纲 一、3主3从的集群配置&#xff1a; 1.1.集群规划 1.分片集群需要的节点数量较多&#xff0c;这里我们搭建一个最小的分片集群&#xff0c;包含3个master节点&#xff0c;每个master包含一个slave节点&#xff0c;结构如下&#xff1a; 2.每组是一主一从&#x…

科研绘图系列:R语言绘制分组箱线图(boxplot)

禁止商业或二改转载,仅供自学使用,侵权必究,如需截取部分内容请后台联系作者! 文章目录 介绍加载R包数据下载导入数据数据预处理画图输出系统信息介绍 科研绘图系列:R语言绘制分组箱线图(boxplot) 加载R包 library(ggpubr) library(ggplot2) library(tidyverse) # dev…

Hadoop - MapReduce编程

文章目录 前言一、创建mapreduce-demo项目1. 在idea上创建maven项目2. 导入hadoop相关依赖 二、MapReduce编程1. 相关介绍1.1 驱动类&#xff08;Driver Class&#xff09;1.1.1 驱动类的定义1.1.2 驱动类的功能1.1.3 驱动类的作用 1.2 Mapper1.2.1 Mapper 的定义1.2.2 Mapper …

原码的乘法运算>>>只有0,1

MQ : 乘数 X : 被乘数 ACC : 乘积高位 [当前位是1,加上被乘数; 当前位是 0,加上0] 例如: MQ的最低位是1,所以要加上被乘数(01101) >>>> 得出 01101 >>>>> ACC MQ 需要整体逻辑右移 (原本01101 01011 >>> 001101 0101) 现在的次低位是…

mapbox基础,style样式汇总,持续更新

&#x1f468;‍⚕️ 主页&#xff1a; gis分享者 &#x1f468;‍⚕️ 感谢各位大佬 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍⚕️ 收录于专栏&#xff1a;mapbox 从入门到精通 文章目录 一、&#x1f340;前言二、&#x1f340;根属性2.1 so…

人工智能知识分享第九天-机器学习_集成学习

集成学习 概念 集成学习是机器学习中的一种思想&#xff0c;它通过多个模型的组合形成一个精度更高的模型&#xff0c;参与组合的模型称为弱学习器&#xff08;基学习器&#xff09;。训练时&#xff0c;使用训练集依次训练出这些弱学习器&#xff0c;对未知的样本进行预测时…

页面滚动下拉时,元素变为fixed浮动,上拉到顶部时恢复原状,js代码以视频示例

页面滚动下拉时,元素变为fixed浮动js代码 以视频示例 <style>video{width:100%;height:auto}.div2,#float1{position:fixed;_position:absolute;top:45px;right:0; z-index:250;}button{float:right;display:block;margin:5px} </style><section id"abou…

排序算法——堆排序

什么是堆 堆就是一种特殊的二叉树&#xff0c;他有以下特点&#xff1a; 堆中某个节点的值总是不大于或不小于其父节点的值&#xff1b; 堆总是一棵完全二叉树。 堆又可以分为大根堆和小根堆 大根堆&#xff1a;根节点最大&#xff0c;每个节点都小于或等于父节点 小跟堆&am…

K-means算法在无监督学习中的应用

K-means算法在无监督学习中的应用 K-means算法是一种典型的无监督学习算法&#xff0c;广泛用于聚类分析。在无监督学习中&#xff0c;模型并不依赖于标签数据&#xff0c;而是根据输入数据的特征进行分组。K-means的目标是将数据集分成K个簇&#xff0c;使得同一簇内的数据点…

Linux 35.6 + JetPack v5.1.4之 pytorch升级

Linux 35.6 JetPack v5.1.4之 pytorch升级 1. 源由2. 升级步骤1&#xff1a;获取二进制版本步骤2&#xff1a;安装二进制版本步骤3&#xff1a;获取torchvision步骤4&#xff1a;安装torchvision步骤5&#xff1a;检查安装版本 3. 使用4. 补充4.1 torchvision版本问题4.2 支持…

Spring——自动装配

假设一个场景&#xff1a; 一个人&#xff08;Person&#xff09;有一条狗&#xff08;Dog&#xff09;和一只猫(Cat)&#xff0c;狗和猫都会叫&#xff0c;狗叫是“汪汪”&#xff0c;猫叫是“喵喵”&#xff0c;同时人还有一个自己的名字。 将上述场景 抽象出三个实体类&…

TCP与DNS的报文分析

场景拓扑&#xff1a; 核心路由配置&#xff1a; 上&#xff08;DNS&#xff09;&#xff1a;10.1.1.1/24 下(WEB)&#xff1a;20.1.1.1/24 左&#xff08;client&#xff09;&#xff1a;192.168.0.1/24 右(PC3)&#xff1a;192.168.1.1/24Clint2配置&a…

PWR-STM32电源控制

一、原理 睡眠模式不响应其他操作&#xff0c;比如烧写程序&#xff0c;烧写时按住复位键松手即可下载&#xff0c;在禁用JTAG也可如此烧写程序。 对于低功耗模式可以通过RTC唤醒、外部中断唤醒、中断唤醒。 1、电源框图&#xff1a; VDDA主要负责模拟部分的供电、Vref和Vref-…

WebSocket 测试入门篇

Websocket 是一种用于 H5 浏览器的实时通讯协议&#xff0c;可以做到数据的实时推送&#xff0c;可适用于广泛的工作环境&#xff0c;例如客服系统、物联网数据传输系统&#xff0c; 基础介绍 我们平常接触最多的是 http 协议的接口&#xff0c;http 协议是请求与响应的模式&…