美文网首页
uni-app 之地图 map

uni-app 之地图 map

作者: Iterate | 来源:发表于2021-05-12 17:19 被阅读0次

<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>
// js 部分
export default {
  data(){
    return{
         // 经纪人id
         agentId:0,
         title: 'map', //地图标题
         latitude: 40.013305,  //纬度
         longitude: 118.685713,  //经度
      //scale:5,//最小数,缩放范围最大,可见程度最大
      //scale:18,//最大数,缩放范围最小,可见程度最小
      }
  }
}
image.png

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,//地图缩放程度
}      (我将每一项都给大家标记出来注释,平台的差异我就不解释了,大家可以去官网看一下)
image.png

接下来把剩下的都给大家展示一下 路线 圆 还有控件 这几个是一体的所以一并显示

这是接着上面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,    //带箭头的线 开发者工具暂不支持该属性
  }],
image.png

注意:当时说想做成那种地图上面带有div的 就是说地图上面可以显示门店位置。门店名称的那种,我当时用定位在网页上实现的,但是一到手机上运行的时候,发现显示不出来,后来我仔细看了一下,那个map组件享有最高的优先级,

你用定位之类,根本就实现不了,后来我发现了一个叫<cover-image> 和 <cover-view > 他是可以覆盖在原生组件上的文本视图 但是也有注意点它不支持的css:

position: fixed
opacity
overflow
padding
linebreak
white-space
另外还有: 在APP端它不支持嵌套其他组件,也不支持本身组件的嵌套,app现在<cover-view>只可以不该原生组件video和map, 一定要注意

转载自:https://www.cnblogs.com/gongliying/p/11222421.html

相关文章

  • uni-app 之地图 map

    属性 longitude:经度latitude:纬度scale:缩放级别,也就是说放大缩下的程度,取值范...

  • zabbixApi4j-Map

    Map map.create: 创建新地图map.delete: 删除地图map.exists: 检查地图是否存在...

  • uni-app map地图组件应用

    map地图组件使用时直接在template中使用标签,标签中可嵌套map属性 map最常用到...

  • 4种常见用户体验地图速览

    摘要:移情地图(Empathy map),客户旅程地图(customer journey map),体验地图(ex...

  • 接入amap_map_fluttify 0.25.0 高德地图社

    amap_map_fluttify 0.25.0高德地图 地图组件 Flutter插件 第三方库 amap_map...

  • 高德地图 JS API 学习摘要2

    自定义地图 指定Map.mapStyle属性,实现自定义样式地图。 使用Map.setMapStyle()方法,加...

  • 微信小程序地图功能

    想要实现地图功能,首先先来说说显示地图 map,该组件是原生组件。map组件官方文档 第一步:显示地图 在对地图进...

  • 地图Map

    - (void)viewDidLoad { [super viewDidLoad]; /**创建地图*/ ...

  • Map地图

    MapKit:用于地图展示 CoreLocation:用于地理定位 CoreLocation框架的使用 CLLoc...

  • Map地图

    #import "ViewController.h" #import @interface ViewControl...

网友评论

      本文标题:uni-app 之地图 map

      本文链接:https://www.haomeiwen.com/subject/yegadltx.html