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>

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

相关推荐
Cacciatore->42 分钟前
Electron 快速上手
javascript·arcgis·electron
vvilkim1 小时前
Electron 进程间通信(IPC)深度优化指南
前端·javascript·electron
不想写bug呀2 小时前
多线程案例——单例模式
java·开发语言·单例模式
某公司摸鱼前端2 小时前
ES13(ES2022)新特性整理
javascript·ecmascript·es13
我不会写代码njdjnssj2 小时前
网络编程 TCP UDP
java·开发语言·jvm
前端 贾公子3 小时前
在移动端使用 Tailwind CSS (uniapp)
前端·uni-app
清幽竹客3 小时前
vue-30(理解 Nuxt.js 目录结构)
前端·javascript·vue.js
weiweiweb8883 小时前
cesium加载Draco几何压缩数据
前端·javascript·vue.js
我不吃饼干9 天前
鸽了六年的某大厂面试题:你会手写一个模板引擎吗?
前端·javascript·面试
源码_V_saaskw9 天前
宇鹿家政服务系统小程序ThinkPHP+UniApp
微信小程序·小程序·uni-app·微信公众平台