更新时间：2024-12-17 14:01:01收藏订阅更新我的文档设置返回文档简介高级定制渲染是地图组件的能力扩展，使小程序地图具备动态定制地图覆盖物渲染布局的能力。使用限制●支付宝版本 10.1.92 及以上，基础库版本1.23.0 及以上。●ide 模拟器暂不支持调试，请在真机进行相关调试。●定制渲染的 xml 布局文件支持编写模板参数，标准是“${参数名称}”，在设置 layout 时可以通过传递 params 参数，地图渲染时会根据传递的模板参数动态渲染。●引用的 xml 文件要放在小程序根目录下，不能放在 pages 目录下，否则显示不出来。●布局的 xml 文件默认会被 ide 打包工具忽略，需要在根目录 mini.project.json 配置规则里将 xml 打到小程序中。javascript复制代码91234{ "format": 2, "assetsinclude":["**/*.xml"] // 配置包含 xml}使用高级定制渲染组件的详细能力描述如下：●针对 marker 的 icon 图标和 customcallout 气泡进行定制渲染。●针对 marker 的 icon 图标进行的定制渲染布局不支持点击事件。●针对 marker 的 customcallout 气泡进行定制渲染的布局提供点击事件响应能力。在 callouttap 事件响应点击事件，此时 data 数据字段会多一个 layoutid 标识事件点击目标，layoutid 即为定制渲染布局中的被点击组件的 id。●以下为渲染前与渲染相对布局后对比图： ●支持 customcallout 默认气泡样式背景的个性化设置。示例代码布局示例相对布局效果示例 水平布局效果示例垂直布局效果示例复杂布局效果示例调用示例.xml 示例代码.xml 示例代码.js 示例代码通用属性下面所呈列的所有属性均适用于高级定制渲染组件。属性类型描述idstring元素标识。 说明： 不要设置为 0，否则会出现获取为空现象。widthnumber元素的宽度。heightnumber元素的高度。leftnumber元素的左侧外边距。 默认值： 0topnumber元素上方的外边距。 默认值： 0rightnumber元素的右侧外边距。bottomnumber元素下方的外边距。background-colorstring元素的背景颜色。 默认值： #00000000paddingnumber元素的所有内边距。 默认值： 0padding-leftnumber元素的左侧内边距。 默认值： 0padding-topnumber元素上方的内边距。 默认值： 0padding-rightnumber元素的右侧内边距。 默认值： 0padding-bottomnumber元素下方的内边距。 默认值： 0border-colorstring元素的边框颜色。 默认值： #00000000border-radiusnumber元素的圆角边框圆角半径。 默认值： 0border-widthnumber元素的边框宽度。 默认值： 0customcallout 气泡背景个性化设置 layoutbubble 属性说明属性类型描述stylestring设置气泡边框，默认带气泡背景。设置为 none 时，隐藏背景。 默认值： bubblebgcolorstring气泡背景色。borderradiusnumber气泡圆角设置。组件地图高级定制渲染组件包含 box（区域）、text（文本）、image（图片）、lottie（动画）。box属性类型描述layoutstring布局类型： ●relative：相对布局●horizontal：水平布局●vertical：垂直布局、复杂布局注意： ios 在 10.1.92 以下版本不支持 horizontal 和 vertical。 默认值： relativehorizontal-alignstring子元素水平对齐方式，有效值：middle。vertical-alignstring子元素垂直对齐方式，有效值：middle。text属性类型描述textstring文本内容。colorstring文本颜色。 默认值： #00000font-sizenumber文本字体大小。clickableboolean文本是否可点击响应事件。 默认值： falsenumber-of-linesnumber文本最大显示行数。stroke-colorstring文本文字描边颜色。 默认值： #ffffffffstroke-widthnumber文本文字描边宽度。text-alignstring文本对齐方式。有效值：left、center、right。 默认值： leftfont-weightstring文本字体粗细程度。有效值：normal、bold。 默认值： nomalimage支持：●绝对路径：如 ''●相对路径（基准为根目录）：如 /img/testpic.png注意： 相对路径不支持 ./img/testpic.png 方式。属性类型描述srcstring图片路径。placeholderstring占位图路径。lottie属性类型描述srcstring动画路径。