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 = true
									uni.showToast({
										title:"签到成功"
									})
								}else{
									uni.showToast({
										title:"签到失败,距离"+distance,
										icon:"error"
									})
								}
					
				}
				// new this.TMap.Map("container")
			}
		},
		onLoad() {
			let that = this
			uni.getLocation({
				// type: 'gcj02',
				type: 'wgs84',
				success: function (res) {
					console.log('当前位置的经度:' + res.longitude);
					console.log('当前位置的纬度:' + res.latitude);
					that.longitude = res.longitude
					that.latitude = res.latitude
					
					
					
					loadTMap("地图密钥").then(TMap=>{
						that.TMap = TMap
						
						 var 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>

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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

金融项目实战 02|接口测试分析、设计以及实现

目录 ⼀、接口相关理论 二、接口测试 1、待测接口&#xff1a;投资业务 2、接口测试流程 3、设计用例理论 1️⃣设计方法 2️⃣工具 4、测试点提取 5、测试用例&#xff08;只涉及了必测的&#xff09; 1️⃣注册图⽚验证码、注册短信验证码 2️⃣注册 3️⃣登录 …

vue3使用vue3-video-play播放m3u8视频

1.安装vue3-video-play npm install vue3-video-play --save2.在组件中使用 import vue3-video-play/dist/style.css; import VideoPlay from vue3-video-play;// 视频配置项 const options reactive({src: https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8, //视频源mute…

Redis:数据类型

1. 字符串&#xff08;String&#xff09; 简介 概念&#xff1a;这是最简单的数据类型&#xff0c;可以存储字符串、整数或浮点数。特点&#xff1a;支持原子操作&#xff0c;如递增和递减数值。 示例 # 设置一个键值对 SET mykey "Hello, Redis!"# 获取该键的值…

【Web安全】SQL 注入攻击技巧详解:UNION 注入(UNION SQL Injection)

【Web安全】SQL 注入攻击技巧详解&#xff1a;UNION 注入&#xff08;UNION SQL Injection&#xff09; 引言 UNION注入是一种利用SQL的UNION操作符进行注入攻击的技术。攻击者通过合并两个或多个SELECT语句的结果集&#xff0c;可以获取数据库中未授权的数据。这种注入技术要…

移远BC28_opencpu方案_pin脚分配

先上图&#xff0c;BC28模块的pin脚如图所示&#xff1a; 下面看看GPIO的复用管脚 然后我自己整理了一份完整的pin功能列表

PHP多功能投票小程序源码

多功能投票小程序&#xff1a;全方位打造专属投票盛宴的得力助手 &#x1f389; &#x1f527; 基于先进的ThinkPHP框架与Uniapp技术深度融合&#xff0c;我们匠心独运&#xff0c;精心雕琢出一款功能全面、操作便捷的投票小程序&#xff0c;旨在为您带来前所未有的投票体验。…

ORB-SALM3配置流程及问题记录

目录 前言 一、OPB-SLAM3基本配置流程 1.下载编译Pangolin 二、ORB-SLAM3配置 1.下载源码 2.创建ROS工作空间并编译ORB-SLAM3-ROS源码 3.尝试编译 三、运行测试 一、OPB-SLAM3基本配置流程 ORB-SLAM3是一个支持视觉、视觉加惯导、混合地图的SLAM&#xff08;Simultane…

RabbitMQ介绍与使用

RabbitMQ官网 RabbitMQ 介绍 RabbitMQ 是一个开源的消息代理和队列服务器&#xff0c;基于 AMQP&#xff08;高级消息队列协议&#xff09;标准&#xff0c;使用 Erlang 编程语言构建。它是消息队列&#xff08;MQ&#xff09;的一种&#xff0c;广泛应用于分布式系统中&#x…

自然语言处理之jieba分词和TF-IDF分析

jieba分词和TF-IDF分析 目录 jieba分词和TF-IDF分析1 jieba1.1 简介1.2 终端下载1.3 基本语法 2 TF-IDF分析2.1 什么是语料库2.2 TF2.3 IDF2.4 TF-IDF2.5 函数导入2.6 方法 3 实际测试3.1 问题解析3.2 代码测试 1 jieba 1.1 简介 结巴分词&#xff08;Jieba&#xff09;是一个…

rust学习——环境搭建

rust安装&#xff1a;https://kaisery.github.io/trpl-zh-cn/ch01-01-installation.html 1、vscode装插件&#xff1a; toml语法支持 依赖管理 rust语法支持 2、创建demo 3、查看目录 4、执行文件的几种方式&#xff1a; rust安装&#xff1a;https://www.rust-lang.org/z…

Opencv查找、绘制轮廓、圆形矩形轮廓和近似轮廓

查找、绘制轮廓、圆形矩形轮廓和近似轮廓 目录 查找、绘制轮廓、圆形矩形轮廓和近似轮廓1 轮廓查找和绘制1.1 轮廓查找1.1.1 函数和参数1.1.2 返回值 1.2 轮廓绘制1.2.1 函数和参数 1.3 步骤1.4 实际测试绘制轮廓 2 绘制近似轮廓2.1 函数和参数2.2 查找特定轮廓2.3 近似轮廓测试…

K8s Pod OOMKilled,监控却显示内存资源并未打满

1. 问题现象 pod一直重启&#xff0c;通过grafana查看&#xff0c;发现内存使用率并没有100%。 2. 排查过程 2.1 describe查看pod最新一次的状态 可以明显看到&#xff0c;最近一次的重启就是因为内存不足导致的。 2.2 describe 查看node节点状态 找到原因了&#xff0c;原来…

Knowledge Editing through Chain-of-Thought

题目 通过思路链进行知识编辑 论文地址&#xff1a;https://arxiv.org/abs/2412.17727 摘要 大型语言模型 (LLM) 在广泛的自然语言处理 (NLP) 任务中表现出卓越的能力。然而&#xff0c;由于频繁重新训练的成本很高&#xff0c;让这些模型与不断发展的世界知识保持同步仍然是一…

C语言Day14(c程序设计小红书+pta)

目录 &#xff08;一&#xff09;求总天数pta 题目说明&#xff1a; 代码实现&#xff1a; 程序分析&#xff1a; &#xff08;二&#xff09;十进制整数转换成R进制数pta 题目说明&#xff1a; 代码实现&#xff1a; 程序分析&#xff1a; &#xff08;三&#xff09;…

G1原理—3.G1是如何提升垃圾回收效率

大纲 1.G1为了提升GC的效率设计了哪些核心机制 2.G1中的记忆集是什么 3.G1中的位图和卡表 4.记忆集和卡表有什么关系 5.RSet记忆集是怎么更新的 6.DCQ机制的底层原理是怎样的 7.DCQS机制及GC线程对DCQ的处理 提升G1垃圾回收器GC效率的黑科技 G1设计了一套TLAB机制 快速…

算法(二)——一维差分、等差数列差分

文章目录 一维差分、等差数列差分一维差分例题&#xff1a;航班预订统计 等差数列差分例题&#xff1a;三步必杀例题&#xff1a;Lycanthropy 一维差分、等差数列差分 一维差分 差分解决的是 区间修改&#xff08;更新&#xff09;问题&#xff0c;特别是多次区间修改问题&…

nexus搭建maven私服

说到maven私服每个公司都有&#xff0c;比如我上一篇文章介绍的自定义日志starter&#xff0c;就可以上传到maven私服供大家使用&#xff0c;每次更新只需deploy一下就行&#xff0c;以下就是本人搭建私服的步骤 使用docker安装nexus #拉取镜像 docker pull sonatype/nexus3:…

StarRocks Awards 2024 年度贡献人物

在过去一年&#xff0c;StarRocks 在 Lakehouse 与 AI 等关键领域取得了显著进步&#xff0c;其卓越的产品功能极大地简化和提升了数据分析的效率&#xff0c;使得"One Data&#xff0c;All Analytics" 的愿景变得更加触手可及。 虽然实现这一目标的道路充满挑战且漫…

安卓app抓包总结(精)

前言 这里简单记录一下相关抓包工具证书的安装 burp证书安装 安装证书到移动设备(安卓7以后必须上传到设备系统根证书上) 导出证书 openssl x509 -inform DER -in cacert.der -out cacert.pem 转换格式 openssl x509 -inform PEM -subject_hash_old -in cacert.pem …

Nginx代理同域名前后端分离项目的完整步骤

前后端分离项目&#xff0c;前后端共用一个域名。通过域名后的 url 前缀来区别前后端项目。 以 vue php 项目为例。直接上 server 模块的 nginx 配置。 server{ listen 80; #listen [::]:80 default_server ipv6onlyon; server_name demo.com;#二配置项目域名 index index.ht…