支付宝小程序地图组件 地图·map高级定制渲染

2020-09-18 11:12 更新

高级定制渲染是地图组件的能力扩展,使小程序地图具备动态定制地图覆盖物渲染布局的能力。

注意: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。
  • 以下为渲染前与渲染相对布局后对比图

imageimage

示例代码

布局示例

相对布局

<!--.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>

效果示例

image

水平布局

<!--.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>

效果示例

image

垂直布局

<!--.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>

效果示例

image

复杂布局

<!--.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>

效果示例

image

调用示例

<!-- 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
以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号