uni-app中的设置
程序员文章站
2022-06-01 11:27:54
...
1.tabber的设置
在pages.json
中,pages配置完整。首先,path的路径一定要写准确,每新建一个页面就会新增一个path;navigationBarTitleText
就是tabber的名字
tabber是自己写的,有的项目需要,有的项目不需要,这个根据情况而定。
效果如下:
2.在uni-app中引进地图
map
的属性:
longitude:经度
latitude:纬度
scale:缩放级别,也就是说放大缩下的程度,取值范围是5-18,默认的是16 。
markers:标记点
circle:圆
controls:控件 他就是说那 在地图上显示一个控件,但是这个控件并不随着地图移动
include-points:缩放视野以包含所有的坐标点
show-location:显示带有方向的当前定位
实例:
根据经纬度显示地图:
<map style="width:100%;height:85vh;":latitude="latitude":longitude="longitude" ></map>
js部分:
export default {
data(){
return{
// 经纪人id
agentId:0,
title: 'map', //地图标题
latitude: 40.013305, //纬度
longitude: 118.685713, //经度
//scale:5,//最小数,缩放范围最大,可见程度最大
//scale:18,//最大数,缩放范围最小,可见程度最小
}
}
}
效果如图:
下一步: 标记点 markers,就是在地图上标记了一个类似位置的标记点
return{
latitude: 40.013305,
longitude: 118.685713,
marker: [{
id:0,
latitude: 40.013305,//纬度
longitude: 118.685713,//经度
iconPath: '', //显示的图标
rotate:0, // 旋转度数
width:20, //宽
height:20, //高
title:'你在哪了',//标注点名
alpha:0.5 //透明度
label:{//为标记点旁边增加标签 //因背景颜色H5不支持
content:'聊城',//文本
color:'red',//文本颜色
// fontSize:24,//文字大小
// x:5,//label的坐标,原点是 marker 对应的经纬度
// y:1,//label的坐标,原点是 marker 对应的经纬度
// borderWidth:12,//边框宽度
// borderColor:'pink',//边框颜色
// borderRadius:20,//边框圆角
// bgColor:'black',//背景色
// padding:5,//文本边缘留白
// textAlign:'right'//文本对齐方式。
},
callout:{//自定义标记点上方的气泡窗口 点击有效
content:'幸福花园店A组',//文本
color:'#ffffff',//文字颜色
fontSize:14,//文本大小
borderRadius:2,//边框圆角
bgColor:'#00c16f',//背景颜色
display:'ALWAYS',//常显
},
// anchor:{//经纬度在标注图标的锚点,默认底边中点
// x:0, 原点为给出的经纬度
// y:0,
// }
}],
scale:16,//地图缩放程度
}