支付寶小程序地圖組件 地圖·map高級定制渲染

高級定制渲染是地圖組件的能力擴展，使小程序地圖具備動態(tài)定制地圖覆蓋物渲染布局的能力。

注意：IDE 模擬器暫不支持調(diào)試，請在真機進行相關(guān)調(diào)試。

Tips

• 定制渲染的 XML 布局文件支持編寫模板參數(shù)，標準是“${參數(shù)名稱}”，在設(shè)置 layout 時可以通過傳遞 params 參數(shù)，地圖渲染時會根據(jù)傳遞的模板參數(shù)動態(tài)渲染。

• 引用的 AXML 文件要放在小程序根目錄下，不能放在 pages 目錄下，否則顯示不出來。

• 布局的 XML 文件默認會被 IDE 打包工具忽略，需要在根目錄 mini.project.json 配置規(guī)則里將 xml 打到小程序中。

  {
     "include":["*/*.xml"] // 配置包含 xml
  }

相關(guān)組件：map 地圖

使用說明

高級定制渲染組件的詳細能力描述如下：

• 針對 marker 的 icon 圖標和 customCallout 氣泡進行定制渲染。
• 針對 marker 的 icon 圖標進行的定制渲染布局不支持點擊事件。
• 針對 marker 的 customCallout 氣泡進行定制渲染的布局提供點擊事件響應(yīng)能力。在 calloutTap 事件響應(yīng)點擊事件，此時 data 數(shù)據(jù)字段會多一個 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>

效果示例

復(fù)雜布局

<!--.xml--><box layout='vertical'>
  <text text='標題欄' font-size='16' color='#FFFFFF'/>
  <box layout='horizontal'>
    <text id='dh' clickable='true' text='導(dǎo)航' 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='衛(wèi)星圖' color='#FFFFFF' 
          padding-left='8' padding-right='8' font-size='16'
          border-radius='6' background-color='#1591CF'/>
  </box>
</box>

效果示例

調(diào)用示例

<!-- 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='導(dǎo)航' 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='衛(wèi)星圖' color='#FFFFFF' 
          padding-left='8' padding-right='8' font-size='16'
          border-radius='6' background-color='#1591CF'/>
  </box>
</box>

// marker數(shù)據(jù)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
      }
    }
 }];

通用屬性

下面所呈列的所有屬性均適用于高級定制渲染組件。

組件

地圖高級定制渲染組件包含 box（區(qū)域）、text（文本）、image（圖片）、lottie（動畫）。

box

text

image

lottie