AppGallery Connect：map組件如何實現(xiàn)指定marker的移動動畫

需求場景：

map地圖組件可以實現(xiàn)指定 marker 的移動動畫。

以下示例展示了 marker 在地圖組件中的移動。marker 的圖標(biāo)是一輛小車，在起點位置沒有任何的旋轉(zhuǎn)，點擊地圖，觸發(fā)小車向目標(biāo)地點移動，并且在移動過程中，小車的圖標(biāo)自動進行旋轉(zhuǎn)，始終保持車頭朝向目標(biāo)地點。

示例截圖：

示例代碼：

<template>

  <div>

    <map

      style="width:{{width}}; height:{{height}}"

      id="map"

      scale="{{scale}}"

      markers="{{markers}}"

      polylines="{{polylines}}"

      @tap="tap"

    >

    </map>

  </div>

</template>

<script>

  const POINT1 = { latitude: 39.9090371069, longitude: 116.3953853161 }

  const POINT2 = { latitude: 39.9089550115, longitude: 116.3992842749 }

  export default {

    private: {

      width: '100%',

      height: '50%',

      scale: 17,

      markers: [

        {

          id: 1,

          latitude: POINT1.latitude,

          longitude: POINT1.longitude,

          anchor: { x: 0.5, y: 0.5 },

          iconPath: '../Common/carA.png',

          width: '100px'

        }

      ],

      polylines: [{ points: [POINT1, POINT2] }]

    },

    tap() {

      this.$element('map').translateMarker({

        markerId: 1,

        destination: POINT2,

        autoRotate: true,

        duration: 5000

      })

    }

  }

</script>

更多map組件參考：

https://developer.huawei.com/consumer/cn/doc/development/quickApp-References/quickapp-component-map#translateMarker_para