请选择 进入手机版 | 继续访问电脑版
 找回密码
 立即注册
搜索

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

1
回复
369
查看
[复制链接]

46

主题

47

帖子

465

积分

 楼主| 2021-7-9 17:07:00 显示全部楼层 |阅读模式

现象描述

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

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

回复

使用道具 举报

23

主题

142

帖子

825

积分

2021-7-9 17:08:48 显示全部楼层

问题分析

需要对地图上点的文本弹框做显示设置(把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>


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册