AppGallery Connect：map組件如何展示marker的callout氣泡

場景描述

marker 可以通過點(diǎn)擊或者常顯的方式顯示一個文本為用來描述和對應(yīng) marker 相關(guān)的信息。

實(shí)現(xiàn)思路

如下示例展示了在對應(yīng)的 marker 上展示常顯文本氣泡。

由于文本氣泡是無法自定義寬高的，即氣泡根據(jù)文本內(nèi)容自適應(yīng)寬高，那么也就說明textAlign屬性，只有文本內(nèi)容中包含換行符（"\n"）的時候，才會有直觀的可視效果。

解決方法

代碼如下：

<template>

  <div>

    <map

      style="width:{{width}}; height:{{height}}"

      scale="{{scale}}"

      markers="{{markers}}"

    >

    </map>

  </div>

</template>

<script>

  const COORDTYPE = 'wgs84'

  const MARKER_PATH = '/Common/marker.png'

  const BEI_JING_WGS = {

    latitude: 39.9073728469,

    longitude: 116.3913445961,

    coordType: COORDTYPE

  }

  export default {

    private: {

      scale: 17,

      markers: [

        {

          width: '100%',

          height: '50%',

          latitude: BEI_JING_WGS.latitude,

          longitude: BEI_JING_WGS.longitude,

          coordType: BEI_JING_WGS.coordType,

          iconPath: MARKER_PATH,

          width: '100px',

          callout: {

            content: '這里是\n北京',

            padding: '20px 5px 20px 5px',

            borderRadius: '20px',

            textAlign: 'left',

            display: 'always'

          }

        }

      ]

    }

  }

</script>

更多參考

Map組件：

https://developer.huawei.com/consumer/cn/doc/development/quickApp-References/quickapp-component-map