AppGallery Connect：map組件如何實(shí)現(xiàn)指定marker的移動(dòng)動(dòng)畫(huà)

需求場(chǎng)景：

map地圖組件可以實(shí)現(xiàn)指定 marker 的移動(dòng)動(dòng)畫(huà)。

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

示例截圖：

示例代碼：

<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