uni-app 地图组件的使用

83 阅读 0 评论 55 点赞

我是靠谱客的博主大气红酒，这篇文章主要介绍uni-app 地图组件的使用，现在分享给大家，希望可以做个参考。

首先说一说map地图组件的一些属性

longitude：经度 latitude：纬度

scale：缩放级别，也就是说放大缩下的程度，取值范围是5-18，默认的是16 ，他就是呢值数越大，放大程度越大，看的越细，看村庄的那种

markers：标记点就是说你在地图上标记出来的东西

polyline：路线可以写两个标记点然后用路线将他们连接起来

circle：圆就是说在地图上画个圈？

controls：控件他就是说那在地图上显示一个控件，但是这个控件并不随着地图移动　　　　include-points：缩放视野以包含所有的坐标点　这就是说你坐标点很多的时候，缩小时可以看到全部

show-location：显示带有方向的当前定位点

最普通的一个示例：

<map style="width:100%;height:85vh;":latitude="latitude":longitude="longitude" ></map>

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
export default {
　　data(){
　　　　return{
       　　// 经纪人id
      　　 agentId:0,
       　　title: 'map', //地图标题
       　　latitude: 40.013305,  //纬度
      　　 longitude: 118.685713，  //经度
　　　　　　//scale：5，//最小数，缩放范围最大，可见程度最大
　　　　　　//scale：18，//最大数，缩放范围最小，可见程度最小
     　}
　　}
}

marks的使用

复制代码

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,//地图缩放程度
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
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,//地图缩放程度
}

其他一些marks的属性

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
controls:[{//在地图上显示控件，控件不随着地图移动
   　　id:1,//控件id
   　　iconPath:'../../static/images/myself.jpg',//显示的图标    
   　　position:{//控件在地图的位置
      　　left:15,
      　　top:15,
      　　width:50,
      　　height:50
  　　  },    
　　}],
　　circles:[{//在地图上显示圆
   　　latitude: 40.013,
   　　longitude: 118.685,
   　　fillColor:"#999999",//填充颜色
  　　 color:"#0016ca",//描边的颜色
   　　radius:20,//半径
  　　 strokeWidth:2//描边的宽度
   }],
　　polyline:[{//指定一系列坐标点，从数组第一项连线至最后一项
　　　　points:[
       　　{latitude: 40.013305,longitude: 118.685713},
      　　 {latitude: 40.013,longitude: 118.685},
　　　　],
　　　　color:"#0000AA",//线的颜色
　　　　width:2,//线的宽度
　　　　dottedLine:true,//是否虚线
　　　　arrowLine:true,    //带箭头的线 开发者工具暂不支持该属性
　　}],