HarmonyOS鸿蒙Next中【快应用】如何实现地图位置点实时刷新

HarmonyOS鸿蒙Next中【快应用】如何实现地图位置点实时刷新

【关键词】

map、markers-callout

【问题背景】

快应用map组件中，地图上点的文本弹框不能跟随点的位置变化。

如下图所示，地图上点的位置坐标已发生变化，但是文本弹框还显示在原位置，并没有显示在新位置。

![cke_399.png](https://alliance-communityfile-drcn.dbankcdn.com/FileServer/getFile/cmtybbs/150/224/722/0900086000150224722.20230519140414.54573090015684476776479858560414:50001231000000:2800:9BF4C682191A0DFD249930DA17BF8B11AF45F912846E9D6C7D2E14A92C8BD68A.png)

【问题分析】

需要对地图上点的文本弹框做显示设置（把markers-callout子属性的display设置为always），并对坐标位置变化做回调弹出文本显示处理。

【解决方法】

具体步骤如下：

1. 将markers第一个点的值赋给一个临时变量。
2. 对临时变量进行需要的修改。
3. 将修改后的临时变量重新赋值给markers。
4. 通过数据绑定实现文本弹框跟随显示。

解决代码如下：

```javascript
<template>
  <div>
    <map 
      style="width:{{width}}; height:{{height}}" 
      scale="{{scale}}" 
      markers="{{markers}}" 
      ontap="tap">
    </map>
  </div>
</template>

<script>
  const COORDTYPE = 'wgs84'
  const MARKER_PATH = '/Common/logo.png'
  const TTJ_WGS = {
    latitude: 39.9073728469,
    longitude: 116.3913445961,
    coordType: COORDTYPE
  }
  const QIANMEN_WGS = {
    latitude: 39.898899,
    longitude: 116.39196216700361,
    coordType: COORDTYPE
  }
  export default {
    private: {
      scale: 17,
      markers: [
        {
          id: 1,
          width: '50%',
          height: '50%',
          latitude: TTJ_WGS.latitude,
          longitude: TTJ_WGS.longitude,
          coordType: TTJ_WGS.coordType,
          iconPath: MARKER_PATH,
          width: '50px',
          callout: {
            content: '景点',
            padding: '5px 5px 5px 5px',
            borderRadius: '20px',
            textAlign: 'left',
            display: 'always'
          }
        }
      ]
    },
    tap: function () {
      // 地图中显示点位的callout跟随位置变换和相应信息的变化而显示
      let marker = this.markers[0];
      marker.latitude = QIANMEN_WGS.latitude;
      marker.longitude = QIANMEN_WGS.longitude;
      marker.callout.content = '前门';
      this.markers = [marker];
    }
  }
</script>