uniapp nvue 踩坑记录

因使用uniapp map ，vue不能支持label 所以使用nvue

1、采用subnvue 方式
此方法可以满足基本地图打点使用，但是无法使用createMapContext的方法
创建如下文件

pages.json

{
      "path": "pages/home/home",
      "style": {
        "app-plus": {
          "subNVues": [
            {
              "id": "concat", // 唯一标识
              "path": "pages/home/subnvue/concat", // 页面路径
              /*"type": "popup",  这里不需要*/
              "style": {
                "position": "absolute",
                "dock": "right",
                "width": "750rpx",
                "height": "1334rpx",
                "background": "transparent"
              }
            }
          ]
        }
      }
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

home.vue

<template>
  <view>
    <view class="page-body">
      <view
        class="page-section page-section-gap"
        style="height: 100vh; width: 100%"
      >
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      subNVue: "",
      subNVueShowDetail: "",
      msg: "",
      id: 0, // 使用 marker点击事件 需要填写id
      title: "map",
      longitude: 106.220885,
      latitude: 29.590185,
  },
  onReady() {
    let self = this;
    // 通过 id 获取 nvue 子窗体
    const subNVue = uni.getSubNVueById("concat");
    // 打开 nvue 子窗体
    subNVue.show("slide-in-left", 0, function () {
      // 打开后进行一些操作...
    });
    //获取subnvue传参 
    uni.$on("page-subnvue", (data) => {
      // console.log("home ----父层 ", data);
    });
    //给subnvue传参 
    setTimeout(() => {
      uni.$emit("page-home", {
        title: "我是page-home ",
        content: JSON.stringify({
          name: 12,
          content: "222",
        }),
      });
    }, 1000);
    subNVue.setStyle({
      top: "0",
      left: "0",
      width: "750rpx",
      height: "1334rpx",
    });
  },
  methods: {
  },
};
</script>

<style></style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60

concat.nvue

<template>
	<div>
		<div class="page-body">
			<div class="page-section page-section-gap">
				<map
					id="map"
					@markertap="bindTap"
					@controltap="bindControltap"
					:controls="controls"
					:style="`width:${width};height:${height}`"
					:markers="markers"
					:scale="15"
					:latitude="latitude"
					:longitude="longitude"
				></map>
				<div style="position: absolute; top:200px;left: 20px;z-index: 9999;color:red">dddjdlkjdljdjkl</div>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			subNVue: '',
			subNVueShowDetail: '',
			msg: '',

			id: 0, // 使用 marker点击事件 需要填写id
			title: 'map',
			// longitude: 116.39742,  // 默认的是北京经纬度
			// latitude: 39.909,
			longitude: 106.220885,
			latitude: 29.590185,
			controls: [],
			show: true,
			height: '',
			width: '',
			markers: [
				{
					id: 'gyqy',
					latitude: '29.595587852178966',
					longitude: '106.22169495575275',
					title: '企业',
					iconPath: './images/map/currentPos.png',
					label: {
						//为标记点旁边增加标签   //因背景颜色H5不支持
						content: 'Hello,I am here', //文本
						color: 'red' //文本颜色
					}
				}
			]
		};
	},
	created() {},

	onLoad() {
		//宽高必须定义
		this.height = uni.getSystemInfoSync().windowHeight + 'px'
		this.width = uni.getSystemInfoSync().windowWidth + 'px';;
		const subNVue = uni.getCurrentSubNVue();
		//接受父层消息
		uni.$on('page-home', data => {
			// console.log('subNVue ----子集', data)
		});
		//给父层发消息
		setTimeout(() => {
			uni.$emit('page-subnvue', {
				title: '我是page-subnvue ',
				content: '我是page-subnvue data content'
			});
		}, 1000);
	},
	onReady() {
		this.createMap(); //地图创建在页面中需要在onReady调用
		//以下方法无效
		let mapContext = uni.createMapContext('map', self);
		console.log('--------------- start');
		mapContext.getRegion({
			success(res) {
				console.log('---------------');
				console.log(res);
			}
		});
	},
	methods: {
		// 创建地图
		createMap() {
			let self = this;
			setTimeout(() => {
				self.show = false;
				setTimeout(() => {
					self.show = true;
					self.longitude = 118.78025;
					self.latitude = 31.972952;
					self.markers = [
						{
							id: 'gyqy2',
							latitude: '31.972952',
							longitude: '118.78025',
							iconPath: '../../../static/icons/number.png',
							label: {
								//为标记点旁边增加标签   //因背景颜色H5不支持
								content: '22', //文本
								color: 'red', //文本颜色
								bgColor: 'rgba(255,255,255,0)',
								anchorY: -30,
								anchorX: -6,
								textAlign: 'center'
							}
							// // 自定义窗口
							// customCallout: {
							//   anchorX: -1,
							//   anchorY: 46,
							//   display: "ALWAYS",
							// },
						},
						{
							id: 'gyqy3',
							latitude: '31.98',
							longitude: '118.789',
							title: '企业222221',
							iconPath: '../../static/icons/number.png',
							label: {
								//为标记点旁边增加标签   //因背景颜色H5不支持
								content: '22', //文本
								color: 'red', //文本颜色
								bgColor: 'rgba(255,255,255,0)',
								anchorY: -30,
								anchorX: -6,
								textAlign: 'center'
							}
						}
					];
				}, 300);
			}, 800);
		},
		startNav() {},
		bindControltap(e) {
			console.log(e);
		},
		bindTap(e) {
			console.log('bindTap');
			console.log(e);
		}
	}
};
</script>

<style></style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152

因为上述方法不能使用uni.createMapContext方法，故使用直接跳转nvue页面方法
代码同上
有几点需要注意
1、vue跳转nvue页面（不能再跳转success执行传参） 需要等nvue onReady，等待所有uni.$on监听注册完成后给vue页面发消息mapReady；vue页面收到消息后，再给nvue页面传参2、所有监听方法必须在onUnload执行uni.$off

nvue

onReady() {
	  
  	  uni.$on("parent-data", this.parentData);
	  console.log('*******************************farmInfoMap onReady')
	  uni.$emit("mapReady", {
	    title: "mapReady"
	  });
  },
  onUnload() {
  	uni.$off('parent-data', this.parentData)
  },
1
2
3
4
5
6
7
8
9
10
11