uniapp 使用 nvue 加载map地图
由于uniappmap经纬度再次赋值 地图空白bug 和 普通vue地图不能操作markers label,故临时使用nvue 载入地图,记录一下使用方法。
·
由于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"
}
}
]
}
}
},
更多推荐
所有评论(0)