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>

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

相关推荐
李歘歘4 分钟前
Golang笔记——切片与数组
开发语言·笔记·后端·golang·go
王子良.16 分钟前
Hadoop3.x 万字解析,从入门到剖析源码
大数据·开发语言·hadoop·经验分享·学习·开源
赵大仁26 分钟前
前端实时显示当前在线人数的实现
前端·javascript·ajax·json·html5
ALIKAOvO28 分钟前
Qt opencv_camera
开发语言·qt·opencv
raoxiaoya31 分钟前
golang中的eval,goeval,govaluate
开发语言·后端·golang
CyberScriptor1 小时前
PHP语言的软件工程
开发语言·后端·golang
Libby博仙1 小时前
VUE3 常用的组件介绍
前端·javascript·vue.js·前端框架·npm·node.js
baivfhpwxf20231 小时前
QT 常用控件的常用方法
开发语言·qt
觅远1 小时前
python+pdfplumber:提取和分析PDF中的表格、文本等数据,实现pdf转图片、CSV、JSON、dict
开发语言·python·pdf
TANGLONG2221 小时前
【C++】揭开C++类与对象的神秘面纱(首卷)(类的基础操作详解、实例化艺术及this指针的深究)
java·开发语言·数据结构·c++·python·考研·面试