uniapp中h5使用地图

js 复制代码
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);
      })
  }
html 复制代码
<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>

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

相关推荐
小陈同学呦10 小时前
前端如何处理订单状态导航的数据竞态问题
前端·javascript
开发者每周简报10 小时前
网海三部曲·无名宗师传
javascript·人工智能
isyangli_blog11 小时前
OpenDayLight (Carbon 版本) 启动与组件安装
开发语言·php
vb20081111 小时前
FastAPI APIRouter
开发语言·python
Benszen11 小时前
KVM虚拟化解决方案
开发语言·perl
会编程的土豆11 小时前
Go 语言反射(Reflection)详解
开发语言·后端·golang
東雪木11 小时前
多线程与并发编程 专属复习笔记
java·开发语言·笔记·java面试
杨充11 小时前
1.3 浮点型数据设计灵魂
开发语言·python·算法
噜噜噜阿鲁~11 小时前
python学习笔记 | 11.3、面向对象高级编程-多重继承
java·开发语言
basketball61612 小时前
Go 语言从入门到进阶:4. 数组和MAP使用方法总结
开发语言·后端·golang