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>
问题: 部署到线上之后,,计算距离不准