支付宝小程序地图组件 地图·map高级定制渲染
高级定制渲染是地图组件的能力扩展，使小程序地图具备动态定制地图覆盖物渲染布局的能力。
注意：IDE 模拟器暂不支持调试，请在真机进行相关调试。
Tips
- 定制渲染的 XML 布局文件支持编写模板参数，标准是“${参数名称}”，在设置 layout 时可以通过传递 params 参数，地图渲染时会根据传递的模板参数动态渲染。
- 引用的 AXML 文件要放在小程序根目录下，不能放在 pages 目录下，否则显示不出来。
- 布局的 XML 文件默认会被 IDE 打包工具忽略，需要在根目录 mini.project.json 配置规则里将 xml 打到小程序中。
{
"include":["*/*.xml"] // 配置包含 xml
}相关组件：map 地图
使用说明
高级定制渲染组件的详细能力描述如下：
- 针对 marker 的 icon 图标和 customCallout 气泡进行定制渲染。
- 针对 marker 的 icon 图标进行的定制渲染布局不支持点击事件。
- 针对 marker 的 customCallout 气泡进行定制渲染的布局提供点击事件响应能力。在 calloutTap 事件响应点击事件，此时 data 数据字段会多一个 layoutId 标识事件点击目标，layoutId 即为定制渲染布局中的被点击组件的 ID。
- 以下为渲染前与渲染相对布局后对比图
示例代码
布局示例
相对布局
<!--.xml--><box>
<image width='60' height='60' src='https://gw.alipayobjects.com/mdn/rms_a8e3ca/afts/img/A*1NvpQqfbis8AAAAAAAAAAABkARQnAQ'/>
<text text='X1' color='#FFFFFF' font-size='8' background-color='#FF0000'
border-radius='6' padding-left='3' padding-right='3' right='0'/>
</box>效果示例
水平布局
<!--.xml--><box layout='horizontal'>
<text id='test1' clickable='true' text='测试1' padding-left='8' padding-right='8'
font-size='16' border-radius='6' background-color='#FF0000'/>
<text id='test2' clickable='true' text='测试2' padding-left='8' padding-right='8'
font-size='16' border-radius='6' background-color='#FF0000'/>
</box>效果示例
垂直布局
<!--.xml--><box layout='vertical'>
<text id='test1' clickable='true' text='测试1' padding-left='8' padding-right='8'
font-size='16' border-radius='6' background-color='#FF0000'/>
<text id='test2' clickable='true' text='测试2' padding-left='8' padding-right='8'
font-size='16' border-radius='6' background-color='#FF0000'/>
</box>效果示例
复杂布局
<!--.xml--><box layout='vertical'>
<text text='标题栏' font-size='16' color='#FFFFFF'/>
<box layout='horizontal'>
<text id='dh' clickable='true' text='导航' color='#FFFFFF'
padding-left='8' padding-right='8' font-size='16'
border-radius='6' background-color='#1591CF'/>
<text id='xc' clickable='true' text='相册' color='#FFFFFF'
padding-left='8' padding-right='8' font-size='16'
border-radius='6' background-color='#1591CF'/>
<text id='wxt' clickable='true' text='卫星图' color='#FFFFFF'
padding-left='8' padding-right='8' font-size='16'
border-radius='6' background-color='#1591CF'/>
</box>
</box>效果示例
调用示例
<!-- layout/marker_icon.xml-->
<box>
<image width='60' height='60' src='https://gw.alipayobjects.com/mdn/rms_a8e3ca/afts/img/A*1NvpQqfbis8AAAAAAAAAAABkARQnAQ'/>
<text text='X${count}' color='#FFFFFF' font-size='8' background-color='#FF0000'
border-radius='6' padding-left='3' padding-right='3' right='0'/>
</box><!-- layout/marker_customcallout.xml-->
<box layout='vertical' background-color='${bgColor}'>
<text text='${title}' font-size='16' color='#FFFFFF'/>
<box layout='horizontal'>
<text id='dh' clickable='true' text='导航' color='#FFFFFF'
padding-left='8' padding-right='8' font-size='16'
border-radius='6' background-color='#1591CF'/>
<text id='xc' clickable='true' text='相册' color='#FFFFFF'
padding-left='8' padding-right='8' font-size='16'
border-radius='6' background-color='#1591CF'/>
<text id='wxt' clickable='true' text='卫星图' color='#FFFFFF'
padding-left='8' padding-right='8' font-size='16'
border-radius='6' background-color='#1591CF'/>
</box>
</box>// marker数据const markers=[{
id: 5,
latitude: 30.275052,
longitude: 120.140716,
width: 60,
height: 60,
iconLayout:{
params:{
count:"1"
},
src:"/layout/marker_icon.xml"
},
customCallout:{
canShowOnTap:true,
layout:{
params:{
title:"标题栏",
bgColor:'#FF00FF'
},
src:"/layout/marker_customcallout.xml"
},
layoutBubble:{
style:"bubble",
bgColor:"#898986",
borderRadius:0,
padding:16
}
}
}];通用属性
下面所呈列的所有属性均适用于高级定制渲染组件。
| 属性名 | 类型 | 默认值 | 描述 | 支持版本 |
|---|---|---|---|---|
| id | String | - | 元素标识。说明：不要设置为 0，否则会出现获取为空现象。 | 支付宝10.1.92 基础库1.23.0 |
| width | Number | - | 元素的宽度 | 支付宝10.1.92 基础库1.23.0 |
| height | Number | - | 元素的高度 | 支付宝10.1.92 基础库1.23.0 |
| left | Number | 0 | 元素的左侧外边距 | 支付宝10.1.92 基础库1.23.0 |
| top | Number | 0 | 元素上方的外边距 | 支付宝10.1.92 基础库1.23.0 |
| right | Number | - | 元素的右侧外边距 | 支付宝10.1.92 基础库1.23.0 |
| bottom | Number | - | 元素下方的外边距 | 支付宝10.1.92 基础库1.23.0 |
| background-color | String | #00000000 | 元素的背景颜色 | 支付宝10.1.92 基础库1.23.0 |
| padding | Number | 0 | 元素的所有内边距 | 支付宝10.1.92 基础库1.23.0 |
| padding-left | Number | 0 | 元素的左侧内边距 | 支付宝10.1.92 基础库1.23.0 |
| padding-top | Number | 0 | 元素上方的内边距 | 支付宝10.1.92 基础库1.23.0 |
| padding-right | Number | 0 | 元素的右侧内边距 | 支付宝10.1.92 基础库1.23.0 |
| padding-bottom | Number | 0 | 元素下方的内边距 | 支付宝10.1.92 基础库1.23.0 |
| border-color | String | #00000000 | 元素的边框颜色 | 支付宝10.1.92 基础库1.23.0 |
| border-radius | Number | 0 | 元素的圆角边框圆角半径 | 支付宝10.1.92 基础库1.23.0 |
| border-width | Number | 0 | 元素的边框宽度 | 支付宝10.1.92 基础库1.23.0 |
组件
地图高级定制渲染组件包含 box（区域）、text（文本）、image（图片）、lottie（动画）。
box
| 属性名 | 类型 | 默认值 | 描述 | 支持版本 |
|---|---|---|---|---|
| layout | String | relative | 布局类型：relative：相对布局horizontal：水平布局vertical：垂直布局、复杂布局注意：iOS 在 10.1.92 以下版本不支持 horizontal 和 vertical。 | 支付宝10.1.92 基础库1.23.0 |
| horizontal-align | String | - | 子元素水平对齐方式，有效值：middle | 支付宝10.1.92 基础库1.23.0 |
| vertical-align | String | - | 子元素垂直对齐方式，有效值：middle | 支付宝10.1.92 基础库1.23.0 |
text
| 属性名 | 类型 | 默认值 | 描述 | 支持版本 |
|---|---|---|---|---|
| text | String | - | 文本内容 | 支付宝10.1.92 基础库1.23.0 |
| color | String | #000000 | 文本颜色 | 支付宝10.1.92 基础库1.23.0 |
| font-size | Number | - | 文本字体大小 | 支付宝10.1.92 基础库1.23.0 |
| clickable | Boolean | false | 文本是否可点击响应事件 | 支付宝10.1.92 基础库1.23.0 |
| number-of-lines | Number | - | 文本最大显示行数 | 支付宝10.1.92 基础库1.23.0 |
| stroke-color | String | #FFFFFFFF | 文本文字描边颜色 | 支付宝10.1.92 基础库1.23.0 |
| stroke-width | Number | - | 文本文字描边宽度 | 支付宝10.1.92 基础库1.23.0 |
| text-align | String | left | 文本对齐方式。有效值：left，center，right | 支付宝10.1.92 基础库1.23.0 |
| font-weight | String | normal | 文本字体粗细程度。有效值：normal，bold | 支付宝10.1.92 基础库1.23.0 |
image
| 属性名 | 类型 | 默认值 | 描述 | 支持版本 |
|---|---|---|---|---|
| src | String | - | 图片路径 | 支付宝10.1.92 基础库1.23.0 |
| placeholder | String | - | 占位图路径 | 支付宝10.1.92 基础库1.23.0 |
lottie
| 属性名 | 类型 | 默认值 | 描述 | 支持版本 |
|---|---|---|---|---|
| src | String | - | 动画路径 | 支付宝10.1.92 基础库1.23.0 |