uniapp中h5使用地图

news2025/1/11 22:33:02
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>

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

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

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

相关文章

【python A* pygame 格式化 自定义起点、终点、障碍】

- pip install pygame test.py(chatgpt版本) 空格键&#xff1a;运行 A* 算法。CtrlC 键&#xff1a;清空路径。CtrlS 键&#xff1a;保存当前地图到 map.json 文件。CtrlL 键&#xff1a;从 map.json 文件加载地图。 import pygame import json from queue import PriorityQ…

xfs扩容目录lvm

pve增加磁盘&#xff1a; -bash-4.2# lsblk NAME MAJ:MIN RM SIZE RO TYPE MOUNTPOINT sda 8:0 0 50G 0 disk ├─sda1 8:1 0 1G 0 part /boot └─sda2 8:2 0 49G 0 part ├─centos-root 253:0 …

Pathview包:整合表达谱数据可视化KEGG通路

Pathview是一个用于整合表达谱数据并用于可视化KEGG通路的一个R包&#xff0c;其会先下载KEGG官网上的通路图&#xff0c;然后整合输入数据对通路图进行再次渲染&#xff0c;从而对KEGG通路图进行一定程度上的个性化处理&#xff0c;并且丰富其信息展示。&#xff08;KEGG在线数…

汽车免拆诊断 | 2007款保时捷Carrera S车行驶中发动机冷却液温度报警灯异常点亮

故障现象 一辆2007款保时捷Carrera S车&#xff0c;搭载3.8 L自然吸气发动机&#xff0c;累计行驶里程约为7.8万km。车主反映&#xff0c;车辆行驶一段距离后&#xff0c;组合仪表上的发动机冷却液温度报警灯异常点亮。为此&#xff0c;在其他维修厂已更换过节温器、发动机冷却…

【PPT解密】ppt只读文档怎么改成可编辑文档

PPT文档打开是只读模式&#xff0c;如何改成可编辑文档呢&#xff1f;这需要分几种情况来说&#xff0c;所以今天将介绍几种方法帮助PPT只读文档改为可编辑文档。 方法一&#xff1a; 我们可以先查看一下文件属性&#xff0c;属性中有只读属性&#xff0c;当我们打开文档之后…

[java基础-集合篇]优先队列PriorityQueue结构与源码解析

优先队列PriorityQueue 优先级队列表示为平衡二进制堆&#xff1a; queue[n] 的两个子级是 queue[2*n1] 和 queue[2*&#xff08;n1&#xff09;]。 注&#xff1a;左子节点index2*parentIndex1,右子节点index2*parentIndex2,源码中计算parent位置时就是这样反过来计算的 优…

ROS2+OpenCV综合应用--11. AprilTag标签码跟随

1. 简介 apriltag标签码追踪是在apriltag标签码识别的基础上&#xff0c;增加了小车车体运动的功能&#xff0c;控制车体从而使摄像头会保持标签码在视觉中间左右运动&#xff0c;在根据物体在摄像头成像近大远小的原理根据这一特性&#xff0c;从而实现标签码跟随功能。 2. 启…

matlab编写分段Hermite插值多项式

文章目录 原理使用分段Hermite插值多项式原因公式第一类的两个插值积函数第二类的两个插值积函数 例题法一法二 代码分段 Hermite 插值的思路&#xff1a;分段 Hermite 插值多项式的构造&#xff1a;MATLAB 实现代码&#xff1a;结果如图&#xff1a;注归一化变量的作用&#x…

小米路由器IPv6 功能使用指南

本文不限于多层路由使用IPv6 的情况&#xff0c;提供解决IPv6 无法获取的更硬核的方法&#xff0c;需要有ssh 工具。&#xff08;无安卓设备&#xff0c;测试环境win、mac、ios&#xff09; 首先明确一点&#xff0c;就是如果想让你的设备得到GUA 地址&#xff0c;即访问 6.i…

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

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

国产编辑器EverEdit - 扩展脚本:关闭所有未修改文档

1 扩展脚本&#xff1a;关闭所有未修改文档 1.1 应用场景 当用户打开过多文档时&#xff0c;部分文档已经修改&#xff0c;而大部分没有修改&#xff0c;为了减少在众多已打开文档中来回跳转的不便&#xff0c;可以将没有修改的文档全部关闭&#xff0c;但目前提供的快速关闭窗…

IIS部署.NetCore/.Net8/.Net9项目(从装环境到配置Swagger)

一、介绍 随着.NetCore开源、以及版本的更新迭代&#xff0c;.NetCore的性能越来越好、功能也越来越丰富&#xff0c;作为纯后端提供Api已经变得越来越频繁&#xff0c;与之配套的接口组件Swagger也成为很多人的选择。下面介绍在IIS上部署Swagger的详细过程。 二、安装IIS服务…

第R4周:LSTM-火灾温度预测

&#x1f368; 本文为&#x1f517;365天深度学习训练营 中的学习记录博客&#x1f356; 原作者&#xff1a;K同学啊 文章目录 一、代码流程1、导入包&#xff0c;设置GPU2、导入数据3、数据集可视化4、数据集预处理5、设置X&#xff0c;y6、划分数据集7、构建模型8、定义训练函…

【python自写包模块的标准化方法】

目标: 自写一个包,提供关于字符串和文件的模块 要求对异常可以检测 str_tools.py: def str_reverse(s):""":param s: 传入的字符串:return: 反转后的字符串"""# i -1# j 0# s2 ""# while i > (-len(s)):# s2 s[i]# …

Win10本地部署大语言模型ChatGLM2-6B

鸣谢《ChatGLM2-6B&#xff5c;开源本地化语言模型》作者PhiltreX 作者显卡为英伟达4060 安装程序 打开CMD命令行&#xff0c;在D盘新建目录openai.wiki if not exist D:\openai.wiki mkdir D:\openai.wiki 强制切换工作路径为D盘的openai.wiki文件夹。 cd /d D:\openai.wik…

【简博士统计学习方法】第1章:1. 统计学习的定义与分类

自用笔记 1. 统计学习的定义与分类 1.1 统计学习的概念 统计学习&#xff08;Statistical Machine Learning&#xff09;是关于计算机基于数据构建概率统计模型并运用模型对数据进行预测与分析的一门学科。 以计算机和网络为平台&#xff1b;以数据为研究对象&#xff1b;以…

Unity 人体切片三维可视化,可任意裁切切割。查看不同断层的图像。

Unity 人体切片三维可视化&#xff0c;真彩色&#xff0c;可任意裁切切割。查看不同断层的图像。 点击查看效果: 视频效果

汽车基础软件AutoSAR自学攻略(四)-AutoSAR CP分层架构(3) (万字长文-配21张彩图)

汽车基础软件AutoSAR自学攻略(四)-AutoSAR CP分层架构(3) (万字长文-配21张彩图) 前面的两篇博文简述了AutoSAR CP分层架构的概念&#xff0c;下面我们来具体到每一层的具体内容进行讲解&#xff0c;每一层的每一个功能块力求用一个总览图&#xff0c;外加一个例子的图给大家进…

科研绘图系列:R语言绘制Y轴截断分组柱状图(y-axis break bar plot)

禁止商业或二改转载,仅供自学使用,侵权必究,如需截取部分内容请后台联系作者! 文章目录 介绍特点意义加载R包数据下载导入数据数据预处理画图输出总结系统信息介绍 Y轴截断分组柱状图是一种特殊的柱状图,其特点是Y轴的刻度被截断,即在某个范围内省略了部分刻度。这种图表…

慧集通(DataLinkX)iPaaS集成平台-数据流程之流程透明化调试功能简介

在线运行流程 查看运行状态 流程第一次执行状态显示 流程第二次执行状态显示&#xff08;由于订单已同步到七星ERP中&#xff0c;由于还是这些订单所以第二次同步时就报错了&#xff09; 点击查看节点组件的详细入参与出参信息 U8C销售订单读取组件执行时详情 入参-查询条件…