uni-app 之地图 map

格调小黄 發表於 2019-7-21 19:45:00

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的地图组件，一下很浅显的我就不跟大家说了
　　先给大家看个最基本的，根据经纬度显示这个地图
<div class="cnblogs_Highlighter">
<pre class="brush:html;gutter:true;">　　　　<map style="width:100%;height:85vh;":latitude="latitude":longitude="longitude" ></map>
</pre>
</div>
　　js部分：
<div class="cnblogs_code">
<pre>export default {
　　data(){
　　　　return{
 　　// 经纪人id
 　　 agentId:0,
 　　title: 'map', //地图标题
 　　latitude: 40.013305,//纬度
 　　 longitude: 118.685713，//经度
　　　　　　//scale：5，//最小数，缩放范围最大，可见程度最大
　　　　　　//scale：18，//最大数，缩放范围最小，可见程度最小
 　}
　　}
}</pre>
</div>
　　看一下图是这样的    这样显示的就是经纬度对应的地图了  这个是默认的缩放16                                                  然后给大家看一下缩放程度的照片我上边有些的   绿色的效果    首先展示的是5的       其次是18的 
 这张是默认的16   <img src="https://img2018.cnblogs.com/blog/1664944/201907/1664944-20190721201133606-483359895.png">这张缩放程度为5 中国的那种<img src="https://img2018.cnblogs.com/blog/1664944/201907/1664944-20190721201454952-1710406282.png">  这张是18 我们庄的那种<img src="https://img2018.cnblogs.com/blog/1664944/201907/1664944-20190721201526531-1566527300.png">
下一步：标记点  markers  顾名思义  就是在地图上标记了一个类似位置的标记点     用代码解释属性
<div class="cnblogs_code">
<pre>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,//地图缩放程度
} （我将每一项都给大家标记出来注释，平台的差异我就不解释了，大家可以去官网看一下）</pre>
</div>
　　
　　先看一张比较普通的，就是只有标记点的那种                                                             再看一下就是有各种标记的那种   
<img src="https://img2018.cnblogs.com/blog/1664944/201907/1664944-20190722100220554-1501971554.png">                                            <img src="https://img2018.cnblogs.com/blog/1664944/201907/1664944-20190722100933205-1402753282.png">
接下来把剩下的都给大家展示一下    路线圆还有控件   这几个是一体的所以一并显示　　　　　　　　　　　　　　　　　　　　
<div class="cnblogs_code">
<pre>这是接着上面data里面写的重复太多我就不在写了补充了没有的
　　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, //带箭头的线开发者工具暂不支持该属性
　　}],</pre>
</div>
 
　　效果图如下：
<img src="https://img2018.cnblogs.com/blog/1664944/201907/1664944-20190722105411591-1484360857.png">           后来我引用了一个比较好理解的控件<img src="https://img2018.cnblogs.com/blog/1664944/201907/1664944-20190729084057453-2112040713.png">
注意：我们公司设计的当时说想做成那种地图上面带有div的   就是说地图上面可以显示门店位置。门店名称的那种，我当时用定位在网页上实现的，但是一到手机上运行的时候，发现显示不出来，后来我仔细看了一下，那个map组件享有最高的优先级，
你用定位之类，根本就实现不了，后来我发现了一个叫<cover-image> 和 <cover-view >  他是可以覆盖在原生组件上的文本视图   但是也有注意点它不支持的css：
<ul>
<li>position: fixed</li>
<li>opacity</li>
<li>overflow</li>
<li>padding</li>
<li>linebreak</li>
<li>white-space</li>
</ul>
另外还有：  在APP端它不支持嵌套其他组件，也不支持本身组件的嵌套，app现在<cover-view>只可以不该原生组件video和map，一定要注意
目前呢 ~~~~总结这么多，以后要是有什么心得的话我会继续补充，也欢迎大家帮我补充哈~~~谢谢大家~~~
  
来源：https://www.cnblogs.com/gongliying/p/11222421.html

頁: [1]

琼殿技术论坛's Archiver

uni-app 之地图 map