MapContext.translateMarker

解释:平移 marker,带动画 。

# 方法参数

Object object

# object参数说明 :

属性名 类型 默认值 必填 说明
markerId Number 指定 marker
destination Object 指定marker移动到的目标点
autoRotate Boolean 移动过程中是否自动旋转 marker
rotate Number marker 的旋转角度
duration Number 1000ms 动画持续时长,平移与旋转分别计算。
animationEnd Function 动画结束时回调函数
success function 接口调用成功的回调函数
fail Function 接口调用失败的回调函数
complete Function 接口调用结束的回调函数(调用成功、失败都会执行)

# 示例

在开发者工具中预览效果

# 扫码体验

请使用百度APP扫码

# 图片示例

# 代码示例

在开发者工具中预览效果

  • 在 swan 文件中
<view class="wrap">
    <map id="myMap" 
        longitude="{{longitude}}"
        latitude="{{latitude}}"
        style="width: 100%"  
        markers="{{markers}}">
    </map>
    <button type="primary" bindtap="translateMarker">平移 marker</button>
</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)
            }
        })
    }
});