MapContext.translateMarker

解释:平移 marker,带动画 。

方法参数

Object object

object参数说明 :

属性名类型默认值必填说明
markerIdNumber指定 marker
destinationObject指定marker移动到的目标点
autoRotateBoolean移动过程中是否自动旋转 marker
rotateNumbermarker 的旋转角度
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)
            }
        })
    }
});