[Quick App] 地図位置点のリアルタイム更新を実現する方法

【キーワード】

地図、マーカー吹き出し

【問題の背景】

クイックアプリの地図コンポーネントでは、地図上の地点のテキストボックスが地点の位置を追従できません。

下図に示すように、地図上の点の位置座標は変更されていますが、テキストボックスは新しい位置ではなく、元の位置に表示されたままです。

【問題分析】

地図上の地点のテキストポップアップ枠の表示設定（マーカー吹き出しサブプロパティの表示を常時に設定）と、座標位置に対するコールバックポップアップテキスト表示処理を行う必要があります変化。

【解決】

具体的な手順は次のとおりです。

1. マーカーの最初のポイントの値を一時変数に割り当てます。

2. 必要に応じて一時変数を変更します。

3. 変更した一時変数をマーカーに再割り当てします。

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

より包括的な技術記事については、https://developer.huawei.com/consumer/cn/forum/?ha_source=zzh をご覧ください。

[Quick App] 地図位置点のリアルタイム更新を実現する方法

おすすめ