本文主要是介绍快应用地图组件、富文本及路由传参，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

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

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赋值
• 地图组件

<map
    class="shopMap"
    latitude="{{shopInfo.lat?Number(shopInfo.lat):0}}"
    longitude="{{shopInfo.lng?Number(shopInfo.lng):0}}"
    markers="{{mapMarkers}}"
    scale="16"
    @loaded="handleMapLoaded"
></map>

• 在地图的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(/<img/gi, '<img style="max-width: 100%;height: auto"');

正在努力学习中，若对你的学习有帮助，留下你的印记呗（点个赞咯^_^）

• 往期推荐：

  • 实现单行及多行文字超出后加省略号
  • 判断iOS和Android及PC端
  • 使用vue开发移动端管理后台
  • 画三角形
  • 微信小程序使用车牌号输入法

这篇关于快应用地图组件、富文本及路由传参的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！