uni-app 之地图 map
怎么说呢，，，我们公司啊（忒好啊）是房地产公司，所以我现在写的是一个关于买房卖房一类的APP，用的这个uni-app ，这种app少不了的就是房产经纪人啊，置业部的店铺啊，店铺啊就不用说了，位置被~~~~是吧
看了一下uni-app 的地图给大家实例一下
<map> 说一说属性问题
longitude：经度 latitude：纬度 scale：缩放级别，也就是说放大缩下的程度，取值范围是5-18，默认的是16 ，他就是呢值数越大，放大程度越大，看的越细，看村庄的那种
markers：标记点 就是说你在地图上标记出来的东西 polyline：路线 可以写两个标记点 然后用路线将他们连接起来 circle：圆 就是说在地图上画个圈？
controls：控件 他就是说那 在地图上显示一个控件，但是这个控件并不随着地图移动 include-points：缩放视野以包含所有的坐标点 这就是说你坐标点很多的时候，缩小时可以看到全部
show-location：显示带有方向的当前定位点
大概粗略说一下 我用代码跟大家解释，这个希望大家先看一遍uni-app的地图组件，一下很浅显的我就不跟大家说了
先给大家看个最基本的，根据经纬度 显示这个地图
<map style="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，//最大数，缩放范围最小，可见程度最小 } } }
看一下图是这样的 这样显示的就是经纬度对应的地图了 这个是默认的缩放16 然后给大家看一下缩放程度的照片 我上边有些的 绿色的效果 首先展示的是5的 其次是18的
这张是默认的16 
这张缩放程度为5 中国的那种
这张是18 我们庄的那种
下一步： 标记点 markers 顾名思义 就是在地图上标记了一个类似位置的标记点 用代码解释属性
return{ latitude: 40.013305, longitude: 118.685713, marker: [{ id:0, latitude: 40.013305,//纬度 longitude: 118.685713,//经度 iconPath: '', //显示的图标 rotate:0, // 旋转度数 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,//地图缩放程度 } （我将每一项都给大家标记出来注释，平台的差异我就不解释了，大家可以去官网看一下）
先看一张比较普通的，就是只有 标记点的那种 再看一下就是有各种标记的那种
接下来把剩下的都给大家展示一下 路线 圆 还有控件 这几个是一体的所以一并显示
这是接着上面data里面写的 重复太多我就不在写了 补充了没有的 controls:[{//在地图上显示控件，控件不随着地图移动 id:1,//控件id iconPath:'../../static/images/myself.jpg',//显示的图标 position:{//控件在地图的位置 left:15, top:15, 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",//线的颜色 2,//线的宽度 dottedLine:true,//是否虚线 arrowLine:true, //带箭头的线 开发者工具暂不支持该属性 }],
效果图如下：
后来我引用了一个比较好理解的控件
注意：我们公司设计的当时说想做成那种地图上面带有div的 就是说地图上面可以显示门店位置。门店名称的那种，我当时用定位在网页上实现的，但是一到手机上运行的时候，发现显示不出来，后来我仔细看了一下，那个map组件享有最高的优先级，
你用定位之类，根本就实现不了，后来我发现了一个叫<cover-image> 和 <cover-view > 他是可以覆盖在原生组件上的文本视图 但是也有注意点它不支持的css：
- position: fixed
- opacity
- overflow
- padding
- linebreak
- white-space
另外还有： 在APP端它不支持嵌套其他组件，也不支持本身组件的嵌套，app现在<cover-view>只可以不该原生组件video和map， 一定要注意
目前呢 ~~~~总结这么多，以后要是有什么心得的话我会继续补充，也欢迎大家帮我补充哈~~~谢谢大家~~~