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 = trueuni.showToast({title:"签到成功"})}else{uni.showToast({title:"签到失败，距离"+distance,icon:"error"})}}// new this.TMap.Map("container")}},onLoad() {let that = thisuni.getLocation({// type: 'gcj02',type: 'wgs84',success: function (res) {console.log('当前位置的经度：' + res.longitude);console.log('当前位置的纬度：' + res.latitude);that.longitude = res.longitudethat.latitude = res.latitudeloadTMap("地图密钥").then(TMap=>{that.TMap = TMapvar 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>