[Quick App] How to realize real-time refresh of map location points

【Key words】

map、markers-callout

 

【Problem background】

In the map component of the quick app, the text box of the point on the map cannot follow the position of the point.

As shown in the figure below, the position coordinates of the points on the map have changed, but the text box is still displayed in the original position, not in the new position.

 

【problem analysis】

It is necessary to set the display setting for the text pop-up frame of the point on the map (set the display of the markers-callout sub-property to always), and perform callback pop-up text display processing for the coordinate position change.

 

【Solution】

Specific steps are as follows:

1. Assign the value of the first point of markers to a temporary variable.

2. Modify the temporary variable as needed.

3. Reassign the modified temporary variable to markers.

4. Realize the follow-up display of the text pop-up box through data binding.

The solution code is as follows:

<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>

 

 

 For more comprehensive technical articles, please visit https://developer.huawei.com/consumer/cn/forum/?ha_source=zzh 

{{o.name}}

{{m.name}}