uniapp 使用 nvue 加载map地图

由于uniapp map经纬度再次赋值 地图空白bug 和 普通vue地图不能操作markers label，故临时使用nvue 载入地图，记录一下使用方法

目录结构为
newFarmUni3
├─ pages
│ ├─ home
│ ├─ subnvue
│ │ └─ concat.nvue
│ └─ home.vue
└─ pages.json

hoem.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,
      controls: [],
      markers: [
        {
          id: "gyqy",
          latitude: "29.595587852178966",
          longitude: "106.22169495575275",
          title: "企业",
          iconPath: "./images/map/currentPos.png",
          label: {
            //为标记点旁边增加标签   //因背景颜色H5不支持
            content: "Hello,I am here", //文本
            color: "red", //文本颜色
          },
        },
      ],
    };
  },

  onLoad() {
    // this.getDeviceLocation();
  },
  onReady() {
    let self = this;
    // 通过 id 获取 nvue 子窗体
    const subNVue = uni.getSubNVueById("concat");
    // 打开 nvue 子窗体
    subNVue.show("slide-in-left", 0, function () {
      // 打开后进行一些操作...
    });
    //接受子级传参
    uni.$on("page-subnvue", (data) => {
      console.log("home ----父层 ", data);
    });
    //给子 传参
    setTimeout(() => {
      console.log("0000000000000");
      uni.$emit("page-home", {
        title: "我是page-home ",
        content: JSON.stringify({
          name: 12,
          content: "222",
        }),
      });
    }, 1000);
    //宽高计算
    const height = axCc.info.screenHeight + "px";
    const width = axCc.info.screenWidth + "px";
    subNVue.setStyle({
      top: "0",
      left: "0",
      width:width,
      height: height,
    });
  },
  methods: {
    
  },
};
</script>

<style></style>

sbnvue/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"
		  v-if="show"
        >
        </map>
		<div style="position: absolute; top:200px;left: 20px;z-index: 9999;color:red">悬浮测试</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:"",
      markers: [
        {
          id: "gyqy",
          latitude: "29.595587852178966",
          longitude: "106.22169495575275",
          title: "企业",
          iconPath: "./images/map/currentPos.png",
          label: {
            //为标记点旁边增加标签   //因背景颜色H5不支持
            content: "Hello,I am here", //文本
            color: "red", //文本颜色
          },
        },
      ],
    };
  },
  onLoad() {
 	  //宽高要动态计算
     this.height = uni.getSystemInfoSync().windowHeight  + "px";
     this.width = uni.getSystemInfoSync().windowWidth  + "px";
	 console.log(this.height);
	 const subNVue = uni.getCurrentSubNVue();
	 console.log('  subNVue', subNVue)
	 //接受父级消息
	 uni.$on('page-home', (data) => {
	 	console.log('subNVue ----子集', data)
	 }) 
	  //给父级发消息
	setTimeout(()=>{
		console.log(1111111111111)
		uni.$emit('page-subnvue', {
		    title: '我是page-subnvue ',  
		    content: '我是page-subnvue data content'  
		});
	},1000)

  },
  onReady() {
    this.createMap(); //地图创建在页面中需要在onReady调用
  },
  methods: {
    // 创建地图
    createMap() {
      let self = this;
      setTimeout(() => {
      	//此处 测试 ios 重新赋值 经纬度不会改变中心点  所以用v-if 重新打开一次
		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",
	            },
	          },
	          {
	            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>

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