<template>
<view class="pagebody">
<chuizi-tabbar :current-page="3"></chuizi-tabbar>
<view class="page-body">
<view class="page-section page-section-gap">
<map ref="mapRef" style="width:100%;height: 100%;" :latitude="latitude" :longitude="longitude"
:scale="scale" @controltap="controltap" :show-location="true" :markers="markersList" @tap="markertap" @markertap="tapMap" @callouttap='callouttap'>
<cover-image class="img-map2" src="/static/map/local.png" @click="clickcontrol"></cover-image>
<cover-image class="img-map" src="/static/map/clocal.png" @click="chooseLocal"></cover-image>
<cover-image class="img-map1" src="/static/map/hlep.png" @click="showHelp"></cover-image>
</map>
</view>
</view>
</view>
</template>
<script>
// import VConsole from 'vconsole';
// const vConsole = new VConsole();
export default {
data() {
return {
showloc:true,
id: 0, // 使用 marker点击事件 需要填写id
title: 'map',
latitude: 0,
longitude: 0,
markers: [],
scale: 20,
markersList:[],
clicknums: 0
}
},
onPullDownRefresh() {
this.getLocation()
},
mounted() {
this.getLocation();
},
methods: {
showHelp() {
uni.showModal({
title:'提示',
content:'可以在地图上点击标点,再次点击标点可以新增调查表',
showCancel:false,
})
},
//地图点击事件
markertap(e) {
this.$refs.mapRef._maps.event.addListener(this.$refs.mapRef._map,'click',(e)=>{
console.log(e.latLng.getLat().toFixed(6) + "," + e.latLng.getLng().toFixed(6),this.clicknums)
this.clicknums += 1
var pointobj = {
id: this.clicknums,
title:'定位点' + this.clicknums,
latitude:e.latLng.getLat().toFixed(6),
longitude:e.latLng.getLng().toFixed(6),
iconPath: '/static/map/setlocal.png',
width:40,
height:40
}
this.markersList.push(pointobj)
})
},
tapMap(e) {
console.log("你点击了标记点", e)
uni.showModal({
title: '提示',
content: '是否需要在此处添加调查表?',
success: function (res) {
if (res.confirm) {
uni.showActionSheet({
itemList: ['栽培药调查表', '栽培药用植物调查表', '动画药调查表'],
success (res) {
const indedx = res.tapIndex
if(indedx == 0) {
uni.redirectTo({
url:"/page_two/addSurver"
})
}else if(indedx == 1) {
uni.redirectTo({
url:"/page_two/addSurverBot"
})
}else{
uni.redirectTo({
url:"/page_two/addSurverAnimal"
})
}
},
fail (res) {
console.log(res.errMsg)
}
})
} else if (res.cancel) {
console.log('用户点击取消');
}
}
})
},
//地图点击事件
callouttap(e) {
console.log('你点击了气泡标签', e)
uni.showModal({
title: '提示',
content: '地图点击事件,气泡标签'
})
},
chooseLocal() {
uni.chooseLocation({
success: (res) => {
// this.latitude = res.latitude
// this.longitude = res.longitude
uni.createMapContext("maps", this).moveToLocation({ //moveToLocation将地图中心移动到当前定位点,需要配合map组件的show-location使用
latitude: res.latitude,
longitude: res.longitude
});
}
})
},
clickcontrol(){
uni.createMapContext("maps", this).moveToLocation({ //moveToLocation将地图中心移动到当前定位点,需要配合map组件的show-location使用
latitude: this.latitude,
longitude: this.longitude
});
},
getLocation() {
var that = this
uni.getLocation({
type: 'gcj02',
// type: 'wgs84',
highAccuracy: true, // 启用高精度定位
success: function(res) {
console.log(res,'res')
// uni.showToast({
// title:'当前位置的经度:' + res.longitude,
// icon:'none'
// })
console.log('当前位置的经度:' + res.longitude);
console.log('当前位置的纬度:' + res.latitude);
that.latitude = res.latitude
that.longitude = res.longitude
uni.stopPullDownRefresh();
// let arr = [{
// id: 0,
// longitude: res.longitude,
// latitude: res.latitude,
// name: res.address
// }]
// let markers = []
// for (var i = 0; i < arr.length; i++) {
// markers = markers.concat({
// id: arr[i].id,
// latitude: arr[i].latitude, //纬度
// longitude: arr[i].longitude, //经度
// callout: { //自定义标记点上方的气泡窗口 点击有效
// content: arr[i].name, //文本
// color: '#ffffff', //文字颜色
// fontSize: 10, //文本大小
// borderRadius: 2, //边框圆角
// bgColor: '#00c16f', //背景颜色
// display: 'ALWAYS', //常显
// },
// })
// }
// that.markers = markers
// console.log(that.markers)
},fail(res) {
console.log(res)
uni.stopPullDownRefresh();
}
})
}
},
}
</script>
<style lang="scss">
uni-page-body {
height: 100vh !important;
}
#maps{
z-index: 1;
height: 500px;
}
.pagebody {
height: 100%;
.page-body {
height: 100%;
.page-section {
height: 100%;
}
}
}
.img-map2{
width: 50rpx;
height: 50rpx;
position: fixed;
bottom: 15vh;
right: 2vh;
background-color: #FFFFFF;
border-radius: 5px;
padding: 7px;
}
.img-map{
width: 50rpx;
height: 50rpx;
position: fixed;
bottom: 22vh;
right: 2vh;
background-color: #FFFFFF;
border-radius: 5px;
padding: 7px;
}
.img-map1{
width: 50rpx;
height: 50rpx;
position: fixed;
bottom: 15vh;
left: 2vh;
background-color: #FFFFFF;
border-radius: 5px;
padding: 7px;
}
::v-deep .uni-map {
height: 300px;
}
</style>

- 发布:2025-06-21 15:06
- 更新:2025-06-21 15:30
- 阅读:24
产品分类: uniapp/H5
PC开发环境操作系统: Windows
PC开发环境操作系统版本号: 10
HBuilderX类型: 正式
HBuilderX版本号: 4.66
浏览器平台: Chrome
浏览器版本: 137.0.7151.104(正式版本)
项目创建方式: HBuilderX
示例代码:
操作步骤:
安卓不行
安卓不行
预期结果:
安卓不行
安卓不行
实际结果:
安卓不行
安卓不行
bug描述:
在安卓手机上显示地图高度无效,怎么设置都无效,px,rpx,vh,%全都无效

