MapContext.translateMarker

解释：平移 marker，带动画 。

方法参数

Object object

object参数说明 ：

属性名类型默认值必填说明
markerIdNumber是指定 marker
destinationObject是指定marker移动到的目标点
autoRotateBoolean是移动过程中是否自动旋转 marker
rotateNumber是marker 的旋转角度
durationNumber1000ms否动画持续时长，平移与旋转分别计算。
animationEndFunction否动画结束时回调函数
successfunction否接口调用成功的回调函数
failFunction否接口调用失败的回调函数
completeFunction否接口调用结束的回调函数（调用成功、失败都会执行）

示例

在开发者工具中预览效果

扫码体验

MapContext.translateMarker - 图1请使用百度APP扫码

图片示例

MapContext.translateMarker - 图2

MapContext.translateMarker - 图3

MapContext.translateMarker - 图4

代码示例

在开发者工具中预览效果

  • 在 swan 文件中
  1. <view class="wrap">
  2.     <map id="myMap" 
  3.         longitude="{{longitude}}"
  4.         latitude="{{latitude}}"
  5.         style="width: 100%"  
  6.         markers="{{markers}}">
  7.     </map>
  8.     <button type="primary" bindtap="translateMarker">平移 marker</button>
  9. </view>
  • 在 js 文件中
Page({
   data: {
        latitude: 40.048828,
        longitude: 116.280412,  
        markers: [{
            markerId: 1,
            latitude: 40.052751,
            longitude: 116.278796
        }, {
            markerId: 2,
            latitude: 40.048828,
            longitude: 116.280412,
            callout: {
                display: 'ALWAYS',
                content: '百度科技园'
            }
        }] 
    },
    onReady() {
        this.mapContext = swan.createMapContext('myMap');
    },
    translateMarker: function () {
        this.mapContext.translateMarker({
            markerId: '2',
            destination: {
                latitude: 40.049655,
                longitude: 116.27505,
            },
            autoRotate: true,
            rotate: 30,
            duration: 1000,
            animationEnd() {
                swan.showToast({
                    title: '动画结束啦！',
                    icon: 'none'
                });
            },
            success(res) {
                console.log('success', res)
            },
            fail (err) {
                console.log('fail', err)
            }
        })
    }
});