uniapp中h5使用地图

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>

问题： 部署到线上之后，，计算距离不准

原文地址：https://blog.csdn.net/qq_36022463/article/details/145064815

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！