如何实现map地图上点的文本弹框跟随点的位置变化

奔跑的狮子

现象描述

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

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

行进的蜗牛

问题分析

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

解决方法

具体步骤如下：

1. 1.将markers第一个点的值赋给一个临时变量。

2. 2.对临时变量进行需要的修改。

3. 3.将修改后的临时变量重新赋值给markers。

4. 4.通过数据绑定实现文本弹框跟随显示。

解决代码如下：

<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 TIANANMEN_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: TIANANMEN_WGS.latitude,
          longitude: TIANANMEN_WGS.longitude,
          coordType: TIANANMEN_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>