map元件如何展示marker的callout氣泡

場景描述

marker 可以透過點選或者常顯的方式顯示一個文字為用來描述和對應 marker 相關的資訊。

實現思路

如下示例展示了在對應的  marker 上展示常顯文字氣泡。

由於文字氣泡是無法自定義寬高的，即氣泡根據文字內容自適應寬高，那麼也就說明 textAlign屬性，只有文字內容中包含換行符（"\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

原文連結： https://developer.huawei.com/consumer/cn/forum/topic/0204465495633720104?fid=0101271690375130218

原作者：Mayism