uniapp nvue 踩坑记录

大家好，欢迎来到IT知识分享网。

因使用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"
              }
            }
          ]
        }
      }
    },

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>

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>

因为上述方法不能使用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)
  },