我在电脑上是可以看到的，使用电脑预览也是可以的，但是就是在手机上无法操作，调试基础库是3.2.1，
<template>
<view class="content">
<view>
<map :enable-rotate="true" :enable-3D="true" :enable-traffic="true" :polyline="polyline" id="map"
:latitude="latitude" :longitude="longitude" :style="{ width: '100%', height: windowHeight + 'px' }"
:scale="16" @markertap="markTap">
<view>
<cover-view>
<view :style="{height:popheight!=''?popheight +'rpx':640+'rpx'}" class="BakcGRound" @touchend='touchend' @touchmove="touchmove($event)"
@touchstart="touchstart($event)">
哭哈打卡机哈得很
</view>
<!-- <button bind:tap="areaEvent">按钮</button> -->
</cover-view>
</view>
</map>
</view>
</view>
</template>
<script>
export default {
data() {
return {
_mapContext: null,
windowHeight: 0,
latitude: 23.099994,
longitude: 113.324520,
MarkersArray: [{
latitude: 23.099994,
longitude: 113.324520,
id: 12,
// 距离
distanceSH: ""
}, {
latitude: 23.099994,
longitude: 113.322520,
id: 13,
// 距离
distanceSH: ""
}],
// 轨迹图
polyline: [{ //指定一系列坐标点，从数组第一项连线至最后一项
points: [],
color: "#0000AA", //线的颜色
width: 1, //线的宽度
borderWidth: 2
// dottedLine:true,//是否虚线
}],
startX: 0, //开始坐标
startY: 0,
popheight: '', //弹窗高度
movebottom: null, // 保存的向上拖动后的最大高度
lastheight: null, //触摸结束后的弹窗高度
}
},
onLoad() {
},
onReady() {
},
methods: {
touchstart(e) {
//开始触摸时
this.startY = e.changedTouches[0].clientY
console.log('开始触摸',this.startY)
},
touchmove: function(target) {
let touchMoveY = target.changedTouches[0].clientY //滑动变化坐标 滑动后的坐标
let movestar = Number(this.startY) - Number(touchMoveY)
console.log(movestar,'movestar')
if (movestar > 0) {
if (this.lastheight != null) {
this.popheight = (this.lastheight + movestar)
} else {
this.popheight = (640 + movestar)
}
if (this.popheight > 1080) {
this.popheight = 1080
}
this.movebottom = this.popheight
} else if (movestar < 0) {
if (this.lastheight != null) {
this.popheight = (this.movebottom + movestar)
} else {
this.popheight = (640 + movestar)
}
if (this.popheight < 640) {
this.popheight = 640
}
}
},
touchend() {
this.lastheight = this.popheight
console.log('滑动中的距离',this.startY)
},
// 绘画两点之间的路线图
getwz() {
this.MarkersArray.forEach((item, index) => {
this.polyline[0].points.push({
latitude: item.latitude,
longitude: item.longitude
});
})
},
// 点击图标的事件
markTap(e) {
console.log('ccccccc')
console.log(e)
console.log('ccccccc')
uni.showToast({
title: `客户名称${e.markerId}`
})
},
// 点聚合
cluster() {
// 仅调用初始化，才会触发 on.("markerClusterCreate", (e) => {})
this._mapContext.initMarkerCluster({
enableDefaultStyle: false, // 是否使用默认样式
zoomOnClick: true, // 点击聚合的点，是否改变地图的缩放级别
gridSize: 60, // 聚合计算时网格的像素大小，默认60
complete(res) {
console.log('initMarkerCluster', res)
}
});
this._mapContext.on("markerClusterCreate", (res) => {
console.log("markerClusterCreate", res);
const clusters = res.clusters
const markers = clusters.map(cluster => {
const {
center,
clusterId,
markerIds
} = cluster
return {
...center,
width: 0,
height: 0,
clusterId, // 必须
label: {
content: markerIds.length + '',
fontSize: 16,
color: '#ffffff',
width: 50,
height: 50,
bgColor: '#00A3FA',
borderRadius: 25,
textAlign: 'center',
anchorX: 0,
anchorY: -20,
}
}
})
this._mapContext.addMarkers({
markers,
clear: false,
complete(res) {
console.log('clusterCreate addMarkers', res)
}
})
});
this._mapContext.on('markerClusterClick', (res) => {
console.log('markerClusterClick', res)
})
this.addMarkers();
},
// 添加标记点
addMarkers() {
// 这里是需要展示的标记点
// 拿到距离后提前计算赋值
this.getDistances(23.099994, 113.324520, 23.099994, 113.322520)
const markers = [{
latitude: this.MarkersArray[0].latitude,
longitude: this.MarkersArray[0].longitude,
id: this.MarkersArray[0].id,
width: 38,
height: 38,
joinCluster: false,
iconPath: "/static/wxtx.jpg",
},
{
latitude: this.MarkersArray[1].latitude,
longitude: this.MarkersArray[1].longitude,
id: this.MarkersArray[1].id,
width: 38,
height: 38,
joinCluster: true,
iconPath: "/static/logo.png",
callout: {
bgColor: "#5AC2EB",
color: "#fff",
content: `配送员距离我${this.MarkersArray[1].distanceSH}`,
// content: `配送员距离我${this.distanceSH}米`,
display: "ALWAYS",
fontSize: "14",
fontWeight: "bold",
padding: 8,
textAlign: "center"
}
}
]
this._mapContext.addMarkers({
markers,
clear: false,
complete(res) {
console.log('addMarkers', res)
}
})
},
//计算距离的方法实现
rad(d) {
return d * Math.PI / 180.0;
},
// 根据经纬度计算距离，参数分别为第一点的纬度，经度；第二点的纬度，经度
getDistances(lat1, lng1, lat2, lng2) {
var radLat1 = this.rad(lat1);
var radLat2 = this.rad(lat2);
var a = radLat1 - radLat2;
var b = this.rad(lng1) - this.rad(lng2);
var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) +
Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)));
s = s * 6378.137;
s = Math.round(s * 10000) / 10000;
var distance = s;
var distance_str = "";
if (parseInt(distance) >= 1) {
distance_str = distance.toFixed(2) + "KM";
} else {
distance_str = (distance * 1000).toFixed(2) + "M";
}
let objData = {
distance: distance,
distance_str: distance_str
}
this.MarkersArray[1].distanceSH = objData.distance_str
console.log(this.MarkersArray, '总距离')
}
},
mounted() {
uni.getSystemInfo({
success: (res) => {
this.windowHeight = res.windowHeight;
},
});
// 创建map对象
this._mapContext = uni.createMapContext("map", this);
this.cluster();
this.getwz()
//获取当前位置
// uni.getLocation({
// type: 'wgs84',
// geocode: true, //设置该参数为true可直接获取经纬度及城市信息
// success: function(res) {
// console.log(res, '获取我的当前位置')
// // latitude: 23.099994,
// // longitude: 113.324520,
// that.latitude = res.latitude //我本人的当前位置
// that.longitude = res.longitude
// that.MarkersArray[0].latitude = 23.099994 //配送员位置 可调接口实时获取并且赋值
// that.MarkersArray[0].longitude = 113.324520
// },
// fail: function() {
// uni.showToast({
// title: '获取地址失败，将导致部分功能不可用',
// icon: 'none'
// });
// }
// });
// 获取配送员与我的位置 前两个是本人的位置 后两个经纬度是配送员的位置
}
}
</script>
<style lang="scss" scoped>
page {
height: 100%;
}
.BakcGRound {
position: fixed;
bottom: 0rpx;
width: 100%;
height: 640rpx;
background-color: #ffffff;
border-top-right-radius: 15rpx;
border-top-left-radius: 15rpx;
z-index: 999;
padding: 20rpx;
}
</style>
