uniapp 安卓app 使用map遇见的问题

2,018 阅读1分钟
  • 结论:1.uniapp使用map组件不要用vue开发使用nvue
  • 2.地图上点击标点出现的弹出信息,不要使用css的定位加z-index来写需要使用cover-view实现
  • 3.如果是vue使用cover-view会导致flex无效,但是nvue是只能使用flex,但是nvue的flex布局默认值 flex-direction属性默认是竖排(column)
  • 4.nvue中不能使用百分比布局,所以想要实现地图铺满全屏需要使用js动态获取屏幕大小进行计算(代码在后面)
  • 5.map中markers标点在vue中自定义的图片大小和气泡颜色等会失效还有其他属性也会失效,这就是map组件需要使用nvue开发的原因之一
  • 6.根据接口请求的数据实现markers标点时不能将一个一个的push进来,这样会导致标点有的时候显示有的时候不显示,解决办法就是将循环push到的数组重新赋给一个新数组 7.有错误和不足的地方希望大佬指点
<map :style="{ height: nowMapIndex ? nintyPercentScreenHeight : seventyPercentScreenHeight, width: '750rpx' }"
				:markers="map"
				:longitude="lon"
				:latitude="lat"
				@markertap="Tmarkertap"></map>
                                
<script>
import icon from '../../static/info.png';
export default {
	data() {
		return {
		
			nowMapIndex: true,
			phoneHeight: '', //屏幕高
			phoneWidth: '', //屏幕宽
			lon: '120.977643',
			lat: '31.386348',
		
			markers: [],
			map:[]
		};
	},
	
	onShow() {
		let th = this;
		uni.request({
			url: 'https://',
			data: {
				TenantId: ''
			},
			success(res) {
				const list = res.data.data.items;

				console.log(list);
				for (let i = 0; i < list.length; i++) {
					th.markers.push({
						id: list[i].id,
						latitude: list[i].lat,
						longitude: list[i].lon,
						iconPath: icon,
						width: 40,
						height: 40,
					});
				}
				console.log(th.markers);
				th.map=th.markers
				console.log(th.map)
			}
		});
		
	},
	onReady() {
		// 计算屏幕高度 ,宽度
		let _this = this;
		uni.getSystemInfo({
			success(res) {
				_this.phoneHeight = res.windowHeight;
				_this.phoneWidth = res.windowWidth;
			}
		});
	},
	computed: {
		//计算
		nintyPercentScreenHeight() {
			//百分之九十的屏幕高
			if (this.phoneHeight !== '' && this.phoneWidth !== '') {
				return (750 / this.phoneWidth) * this.phoneHeight * 1 + 'rpx';
			} else {
				return '1250rpx';
			}
		},
		seventyPercentScreenHeight() {
			//百分之七十的屏幕高
			if (this.phoneHeight !== '' && this.phoneWidth !== '') {
				return (750 / this.phoneWidth) * this.phoneHeight * 0.7 + 'rpx';
			} else {
				return '1000rpx';
			}
		}
	},
	methods: {
	
		Tmarkertap(e) {
		
			console.log('点击标记点', e.detail.markerId);
		
		},