快应用有用到官方提供的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>
/* 地图加载完成 */
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.路由传参
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"');
正在努力学习中，若对你的学习有帮助，留下你的印记呗（点个赞咯^_^）
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。