快应用地图组件、富文本及路由传参

快应用有用到官方提供的map地图组件(百度地图),遇到点小问题,这里记录下,以及快应用官方提供的rich-text富文本、路由传参

1.效果图

快应用地图组件、富文本及路由传参_第1张图片

2.map

2.1属性

  • latitude 中心纬度,默认为当前位置,否则为北京
  • longitude 中心经度,默认为当前位置,否则为北京
  • scale 地图缩放级别,4-20,微信中的是默认16
  • markers 用来标记地图上的点
  • showmylocation 显示带有方向的当前定位点
  • 我这里想显示的是markers,并使用label属性

2.2markers

  • latitude: 0, // 标记点纬度,必填
  • longitude: 0, // 标记点经度,必填
  • iconPath: '', // 标记点的那个图标,我这里就是那个定位图标
  • width: 16,
  • height: 24,
  • opacity: 0.7, // 标记透明度,0-1,与微信不同,微信的是alpha属性,也是透明度
  • label: {}, // 标记点的相关信息
label:{
    content:  '当前位置',  // 显示的内容
    color:  '#767676',
    fontSize:  '10px',
    borderRadius:  '6px',
    padding:  '10px',
    textAlign:  'center',
    display:  'always',
    backgroundColor:  '#ffffff',
    anchorX:  -200,
    anchorY:  -140
}
  • 可以使用label中的anchorX和anchorY来调整标记的位置

3.操作

  • 你要是直接写死数据,不使用后台的数据,是可以直接渲染出来这个标记的,但是,你要是使用后台的数据,就不能直接在你请求回后台数据的那个方法里对label赋值
  • 地图组件
  • 在地图的loaded方法里对label赋值
/* 地图加载完成 */
handleMapLoaded() {
    let  item  =  Object.assign({}, this.mapMarkers[0]);
    item.latitude  =  this.shopInfo.lat?Number(this.shopInfo.lat):0;
    item.longitude  =  this.shopInfo.lng?Number(this.shopInfo.lng):0;
    item.label.content  =  this.shopInfo.address;
    this.mapMarkers  = [item];
},

4.路由传参

  • 可以直接在uri中加入参数
router.push({
    uri:  '/pages/index?id='  +  goodsid,
});
  • 如果你传递的参数是图片链接,这样就不能跳转,他会将参数中的链接当做页面地址或外链地址,这时就得用params来传递
router.push({
    uri:  '/pages/AddForm',
    params: {
        storeID:  this.shopId,
        banner:  encodeURI(this.banner),
    }
})
  • 接收参数依然一样,使用this.参数,如this.banner

5.富文本

  • 快应用中的富文本使用rich-text,他对图片没有做处理,如果图片太大,他就会使富文本出现滚动,可以用正则修改图片的样式进行调整
this.richText = text.replace(/

 

 

你可能感兴趣的:(快应用,快应用地图,地图标记label,地图markers,路由传参,路由传递http链接参数)