uni-app中的设置

缺乏、安全感 2023-07-19 10:42 18阅读 0赞

## 1.tabber的设置 ##

在`pages.json`中，pages配置完整。首先，path的路径一定要写准确，每新建一个页面就会新增一个path；`navigationBarTitleText`就是tabber的名字  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pob3VjaGFuZ3l1ZQ_size_16_color_FFFFFF_t_70]  
**tabber**是自己写的，有的项目需要，有的项目不需要，这个根据情况而定。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pob3VjaGFuZ3l1ZQ_size_16_color_FFFFFF_t_70 1]  
效果如下：  
![在这里插入图片描述][20200330154613847.png]

## 2.在uni-app中引进地图 ##

`map`的属性：

longitude：经度  
 latitude：纬度  
 scale：缩放级别，也就是说放大缩下的程度，取值范围是5-18，默认的是16 。  
markers：标记点  
circle：圆  
controls：控件 他就是说那 在地图上显示一个控件，但是这个控件并不随着地图移动　　　　  
include-points：缩放视野以包含所有的坐标点  
show-location：显示带有方向的当前定位

**实例：**  
根据经纬度显示地图：

js部分：

export default { 
    　　data(){ 
    　　　　return{ 
           　　// 经纪人id
          　　 agentId:0,
           　　title: 'map', //地图标题
           　　latitude: 40.013305,  //纬度
          　　 longitude: 118.685713，  //经度
    　　　　　　//scale：5，//最小数，缩放范围最大，可见程度最大
    　　　　　　//scale：18，//最大数，缩放范围最小，可见程度最小
         　}
    　　}
    }

效果如图：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pob3VjaGFuZ3l1ZQ_size_16_color_FFFFFF_t_70 2]  
**下一步：** 标记点 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,//地图缩放程度
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pob3VjaGFuZ3l1ZQ_size_16_color_FFFFFF_t_70 3]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pob3VjaGFuZ3l1ZQ_size_16_color_FFFFFF_t_70]: /images/20230528/8643ae1690644f0f9b4bfcf7deb4fe64.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pob3VjaGFuZ3l1ZQ_size_16_color_FFFFFF_t_70 1]: /images/20230528/7dfa0ebd9c8b481b9a4258963a052ec3.png
[20200330154613847.png]: /images/20230528/696b698b47784372ad33f0986bc5a1dc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pob3VjaGFuZ3l1ZQ_size_16_color_FFFFFF_t_70 2]: /images/20230528/5051e4eb0c0e4480927a55c78f4078ef.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pob3VjaGFuZ3l1ZQ_size_16_color_FFFFFF_t_70 3]: /images/20230528/497678e141b64d2e9f2ec2c068a933a7.png