欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

uni-app中的设置

程序员文章站 2022-06-01 11:27:54
...

1.tabber的设置

pages.json中,pages配置完整。首先,path的路径一定要写准确,每新建一个页面就会新增一个path;navigationBarTitleText就是tabber的名字
uni-app中的设置
tabber是自己写的,有的项目需要,有的项目不需要,这个根据情况而定。
uni-app中的设置
效果如下:
uni-app中的设置

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,//最大数,缩放范围最小,可见程度最小
      }
  }
}

效果如图:

uni-app中的设置
下一步: 标记点 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,//地图缩放程度
}      

uni-app中的设置