浏览器版本低!无法浏览完整内容,建议升级或更换浏览器。

文档全面上新

更科技的视觉体验,更高效的页面结构,快前往体验吧!

体验新版
 
第1行: 第1行:
 
<div id="examples_center"><!-- 页面标题 --><div class="title-hd">点标记平移动画</div><!-- 标题下子标题及简介,可有多个 --><div class="title-mi">功能场景</div><div class="wrap-mi">需要展示点标记在地图上的移动效果时可使用,平移效果流畅。</div><!--  --></div><div class="demos_wrap"><div class="header"><div class="andiord-header active">Android</div><div class="ios-header">iOS</div></div><div class="andiord-wrap wrap"><div class="wrap-wp"><div class="wrap_left"><div class="left-video"><div class="img-bg-and"></div><div class="phone-android"><div class="video-wrap infor"><div class="video-control"></div><!-- 安卓视频位置 (不写协议)--><pre>//mapopen-website-wiki.bj.bcebos.com/demos/AndroidVideos/Android点标记平移动画.mp4</pre>
 
<div id="examples_center"><!-- 页面标题 --><div class="title-hd">点标记平移动画</div><!-- 标题下子标题及简介,可有多个 --><div class="title-mi">功能场景</div><div class="wrap-mi">需要展示点标记在地图上的移动效果时可使用,平移效果流畅。</div><!--  --></div><div class="demos_wrap"><div class="header"><div class="andiord-header active">Android</div><div class="ios-header">iOS</div></div><div class="andiord-wrap wrap"><div class="wrap-wp"><div class="wrap_left"><div class="left-video"><div class="img-bg-and"></div><div class="phone-android"><div class="video-wrap infor"><div class="video-control"></div><!-- 安卓视频位置 (不写协议)--><pre>//mapopen-website-wiki.bj.bcebos.com/demos/AndroidVideos/Android点标记平移动画.mp4</pre>
</div><div class="video-icon-and"><div class="play play-and"></div><div class="stop stop-and"></div></div></div><div class="progressWrap-hide-and"></div><div id="videoControls-and"><div id="progressWrap-and"><div id="playProgress-and"></div></div></div></div><div class="left-qrCode"><!-- 安卓二维码位置 --><div class="qrCode-and">1590746640|//mapopen-website-wiki.bj.bcebos.com/demos/newqrcodes/点标记平移动画.png</div><div>扫码体验</div></div></div><div class="wrap_right"><div class="wrap_right_nav"><div class="wrap_right_nav_l"><div>使用产品</div><div><!-- 安卓使用产品下选项,可有多个 --><!-- 产品1|/index.php?title=test --><div class="documentA">Android地图SDK|/index.php?title=androidsdk</div><div>></div><div class="documentA">点标记动画|/index.php?title=androidsdk/guide/render-map/animation</div></div></div><div class="wrap_right_nav_r">下载源码</div><!-- 安卓源码地址 --><div class="github-url-and">//mapopen-website-wiki.bj.bcebos.com/demos/BaiduMapSDKExample.zip</div></div><div class="wrap_table"><div class="table_nav"><div class="left-icon"></div><div>核心接口</div></div><div class="table_wrap"><div class="table_wrap_title"><div>类</div><div>接口</div><div>描述</div><div>备注</div></div><!-- 表格接口,可有多个 --><div class="table_wrap_con"><div class="table_wrap_w"><div><div class="table-wrap-className">Transformation</div></div><div><div>Transformation(LatLng... latlng)</div></div><div><div>平移动画构造方法,传入要平移的经纬度坐标</div></div><div><div>V5.1.0起</div></div></div><!--  --><div class="table_wrap_w"><div><div class="table-wrap-className">Transformation</div></div><div><div>setDuration(long animationTime)</div></div><div><div>设置平移动画时长</div></div><div><div>V5.1.0起</div></div></div><div class="table_wrap_w"><div><div class="table-wrap-className">Transformation</div></div><div><div>TsetAnimationListener(AnimationListener listener)</div></div><div><div>设置平移动画监听器</div></div><div><div>V5.1.0起</div></div></div><div class="table_wrap_w"><div><div class="table-wrap-className">Transformation</div></div><div><div>setInterpolator(Interpolator interpolator)</div></div><div><div>设置平移动画差值器</div></div><div><div>V5.1.0起</div></div></div><div class="table_wrap_w"><div><div class="table-wrap-className">Transformation</div></div><div><div>setRepeatMode(RepeatMode repeatMode)</div></div><div><div>设置平移动画重复模式</div></div><div><div>V5.1.0起</div></div></div><div class="table_wrap_w"><div><div class="table-wrap-className">Transformation</div></div><div><div>setRepeatCount(int count)</div></div><div><div>设置平移动画重复次数</div></div><div><div>V5.1.0起</div></div></div><div class="table_wrap_w"><div><div class="table-wrap-className">Transformation</div></div><div><div>cancel()</div></div><div><div>取消平移动画</div></div><div><div>V5.1.0起</div></div></div><div class="table_wrap_w"><div><div class="table-wrap-className">Aniamtion.AnimationListener()</div></div><div><div>onAnimationStart()</div></div><div><div>动画开始回调</div></div><div><div>V5.1.0起</div></div></div><div class="table_wrap_w"><div><div class="table-wrap-className">Aniamtion.AnimationListener()</div></div><div><div>onAnimationEnd()</div></div><div><div>动画结束回调</div></div><div><div>V5.1.0起</div></div></div><div class="table_wrap_w"><div><div class="table-wrap-className">Aniamtion.AnimationListener()</div></div><div><div>onAnimationCancel()</div></div><div><div>动画取消回调</div></div><div><div>V5.1.0起</div></div></div><div class="table_wrap_w"><div><div class="table-wrap-className">Marker</div></div><div><div>setAnimation(Animation animation)</div></div><div><div>设置动画</div></div><div><div>V5.1.0起</div></div></div><div class="table_wrap_w"><div><div class="table-wrap-className">Marker</div></div><div><div>startAnimation()</div></div><div><div>启动动画</div></div><div><div>V5.1.0起</div></div></div><div class="table_wrap_w"><div><div class="table-wrap-className">Marker</div></div><div><div>cancelAnimation()</div></div><div><div>取消动画</div></div><div><div>V5.1.0起</div></div></div><div class="table_wrap_w"><div><div class="table-wrap-className">MarkerOptions</div></div><div><div>position(LatLng latlng)</div></div><div><div>配置Marker经纬度</div></div><div><div>V5.1.0起</div></div></div><div class="table_wrap_w"><div><div class="table-wrap-className">MarkerOptions</div></div><div><div>icon(BitmapDescriptor bitmapDescriptor)</div></div><div><div>配置Marker图标</div></div><div><div>V5.1.0起</div></div></div></div></div></div></div></div><div class="pre-nav"><div class="left-icon"></div><div>核心代码</div></div><div class="pre-nav"><div>1.构造平移动画</div></div><div class="pre-wrap"><div class="pre-wrap-nav"><div>JAVA</div></div><!-- 安卓示例代码位置 --><div class="pre-wrap-w pre-wrap-w-and"><pre class="prettyprint prettyprinted pre-and">Transformation transformation = new Transformation(mMarker.getPosition(), mLatLng);
+
</div><div class="video-icon-and"><div class="play play-and"></div><div class="stop stop-and"></div></div></div><div class="progressWrap-hide-and"></div><div id="videoControls-and"><div id="progressWrap-and"><div id="playProgress-and"></div></div></div></div><div class="left-qrCode"><!-- 安卓二维码位置 --><div class="qrCode-and">1590746640|//mapopen-website-wiki.bj.bcebos.com/demos/newqrcodes/点标记平移动画.png</div><div>扫码体验</div></div></div><div class="wrap_right"><div class="wrap_right_nav"><div class="wrap_right_nav_l"><div>使用产品</div><div><!-- 安卓使用产品下选项,可有多个 --><div class="documentA">Android地图SDK|/index.php?title=androidsdk</div><div>></div><div class="documentA">点标记动画|/index.php?title=androidsdk/guide/render-map/animation</div></div></div><div class="wrap_right_nav_r">下载源码</div><!-- 安卓源码地址 --><div class="github-url-and">//mapopen-website-wiki.bj.bcebos.com/demos/BaiduMapSDKExample.zip</div></div><div class="wrap_table"><div class="table_nav"><div class="left-icon"></div><div>核心接口</div></div><div class="table_wrap"><div class="table_wrap_title"><div>类</div><div>接口</div><div>描述</div><div>备注</div></div><!-- 表格接口,可有多个 --><div class="table_wrap_con"><div class="table_wrap_w"><div><div class="table-wrap-className">Transformation</div></div><div><div>Transformation(LatLng... latlng)</div></div><div><div>平移动画构造方法,传入要平移的经纬度坐标</div></div><div><div>V5.1.0起</div></div></div><!--  --><div class="table_wrap_w"><div><div class="table-wrap-className">Transformation</div></div><div><div>setDuration(long animationTime)</div></div><div><div>设置平移动画时长</div></div><div><div>V5.1.0起</div></div></div><div class="table_wrap_w"><div><div class="table-wrap-className">Transformation</div></div><div><div>TsetAnimationListener(AnimationListener listener)</div></div><div><div>设置平移动画监听器</div></div><div><div>V5.1.0起</div></div></div><div class="table_wrap_w"><div><div class="table-wrap-className">Transformation</div></div><div><div>setInterpolator(Interpolator interpolator)</div></div><div><div>设置平移动画差值器</div></div><div><div>V5.1.0起</div></div></div><div class="table_wrap_w"><div><div class="table-wrap-className">Transformation</div></div><div><div>setRepeatMode(RepeatMode repeatMode)</div></div><div><div>设置平移动画重复模式</div></div><div><div>V5.1.0起</div></div></div><div class="table_wrap_w"><div><div class="table-wrap-className">Transformation</div></div><div><div>setRepeatCount(int count)</div></div><div><div>设置平移动画重复次数</div></div><div><div>V5.1.0起</div></div></div><div class="table_wrap_w"><div><div class="table-wrap-className">Transformation</div></div><div><div>cancel()</div></div><div><div>取消平移动画</div></div><div><div>V5.1.0起</div></div></div><div class="table_wrap_w"><div><div class="table-wrap-className">Aniamtion.AnimationListener()</div></div><div><div>onAnimationStart()</div></div><div><div>动画开始回调</div></div><div><div>V5.1.0起</div></div></div><div class="table_wrap_w"><div><div class="table-wrap-className">Aniamtion.AnimationListener()</div></div><div><div>onAnimationEnd()</div></div><div><div>动画结束回调</div></div><div><div>V5.1.0起</div></div></div><div class="table_wrap_w"><div><div class="table-wrap-className">Aniamtion.AnimationListener()</div></div><div><div>onAnimationCancel()</div></div><div><div>动画取消回调</div></div><div><div>V5.1.0起</div></div></div><div class="table_wrap_w"><div><div class="table-wrap-className">Marker</div></div><div><div>setAnimation(Animation animation)</div></div><div><div>设置动画</div></div><div><div>V5.1.0起</div></div></div><div class="table_wrap_w"><div><div class="table-wrap-className">Marker</div></div><div><div>startAnimation()</div></div><div><div>启动动画</div></div><div><div>V5.1.0起</div></div></div><div class="table_wrap_w"><div><div class="table-wrap-className">Marker</div></div><div><div>cancelAnimation()</div></div><div><div>取消动画</div></div><div><div>V5.1.0起</div></div></div><div class="table_wrap_w"><div><div class="table-wrap-className">MarkerOptions</div></div><div><div>position(LatLng latlng)</div></div><div><div>配置Marker经纬度</div></div><div><div>V5.1.0起</div></div></div><div class="table_wrap_w"><div><div class="table-wrap-className">MarkerOptions</div></div><div><div>icon(BitmapDescriptor bitmapDescriptor)</div></div><div><div>配置Marker图标</div></div><div><div>V5.1.0起</div></div></div></div></div></div></div></div><div class="pre-nav"><div class="left-icon"></div><div>核心代码</div></div><div class="pre-nav"><div>1.构造平移动画</div></div><div class="pre-wrap"><div class="pre-wrap-nav"><div>JAVA</div></div><!-- 安卓示例代码位置 --><div class="pre-wrap-w pre-wrap-w-and"><pre class="prettyprint prettyprinted pre-and">Transformation transformation = new Transformation(mMarker.getPosition(), mLatLng);
 
transformation.setDuration(3000);
 
transformation.setDuration(3000);
 
transformation.setAnimationListener(new Animation.AnimationListener() {
 
transformation.setAnimationListener(new Animation.AnimationListener() {
第27行: 第27行:
 
                 </pre>
 
                 </pre>
 
<div class="pre-btn"><div class="pre-btn-copy-and">复制</div><div class="pre-btn-cb-and">深色</div></div><div class="success">复制成功</div></div></div><div class="more-nav"><div class="left-icon"></div><div>更多功能</div></div><div class="more-wrap"><!-- 安卓更多功能下选项 --><!-- 点标记动画|/index.php?title=test --><div><div class="point"></div><div class="documentA">添加文字和信息窗|/index.php?title=androidsdk/guide/render-map/text</div></div></div></div><div class="ios-wrap wrap" style="display: none;"><div class="wrap-wp"><div class="wrap_left"><div class="left-video"><div class="img-bg-ios-sh"></div><div class="phone-ios"><div class="video-wrap infor"><div class="video-control"></div><!-- ios视频位置 --><pre>//mapopen-website-wiki.bj.bcebos.com/demos/iosVideos/iOS点标记平移动画.mov</pre>
 
<div class="pre-btn"><div class="pre-btn-copy-and">复制</div><div class="pre-btn-cb-and">深色</div></div><div class="success">复制成功</div></div></div><div class="more-nav"><div class="left-icon"></div><div>更多功能</div></div><div class="more-wrap"><!-- 安卓更多功能下选项 --><!-- 点标记动画|/index.php?title=test --><div><div class="point"></div><div class="documentA">添加文字和信息窗|/index.php?title=androidsdk/guide/render-map/text</div></div></div></div><div class="ios-wrap wrap" style="display: none;"><div class="wrap-wp"><div class="wrap_left"><div class="left-video"><div class="img-bg-ios-sh"></div><div class="phone-ios"><div class="video-wrap infor"><div class="video-control"></div><!-- ios视频位置 --><pre>//mapopen-website-wiki.bj.bcebos.com/demos/iosVideos/iOS点标记平移动画.mov</pre>
</div><div class="video-icon-ios"><div class="play play-ios"></div><div class="stop stop-ios"></div></div></div><div class="progressWrap-hide-ios"></div><div id="videoControls-ios"><div id="progressWrap-ios"><div id="playProgress-ios"></div></div></div></div><div class="left-qrCode iosqrCode"><!-- ios二维码位置 --><div class="qrCode-ios">1590746640|//mapopen-website-wiki.bj.bcebos.com/demos/ioscodes/点标记平移动画@1xios.png</div><div>扫码体验</div></div></div><div class="wrap_right"><div class="wrap_right_nav"><div class="wrap_right_nav_l"><div>使用产品</div><div><!-- IOS使用产品下选项,可有多个 --><!-- 产品1|/index.php?title=test --><div class="documentA">iOS地图SDK|/index.php?title=iossdk</div><!--  --><div>></div><div class="documentA">点标记动画|/index.php?title=iossdk/guide/map-render/animation</div></div></div><div class="wrap_right_nav_r">下载源码</div><!-- IOS源码地址 --><div class="github-url-ios">//mapopen-website-wiki.bj.bcebos.com/BaiduMapSDKDemo.zip</div></div><div class="wrap_table"><div class="table_nav"><div class="left-icon"></div><div>核心接口</div></div><div class="table_wrap"><div class="table_wrap_title"><div>类</div><div>接口</div><div>描述</div></div><!-- ios表格接口内容,可有多个 --><!-- 表格接口,可有多个 --><div class="table_wrap_con"><div class="table_wrap_w"><div><div class="table-wrap-className">BMKPointAnnotation</div></div><div><div>- (instancetype)init</div></div><div><div>创建点标记实例</div></div></div><!--  --><div class="table_wrap_w"><div><div class="table-wrap-className">BMKPointAnnotation</div></div><div><div>CLLocationCoordinate2D coordinate;</div></div><div><div>设置点标记经纬度坐标</div></div></div><div class="table_wrap_w"><div><div class="table-wrap-className">BMKPointAnnotation</div></div><div><div>NSString *title;</div></div><div><div>设置显示的标题</div></div></div><div class="table_wrap_w"><div><div class="table-wrap-className">BMKPinAnnotationView</div></div><div><div>- (id)initWithAnnotation:(id&lt;BMKAnnotation&gt;)annotationreuseIdentifier:(NSString *)reuseIdentifier;</div></div><div><div>初始化并返回一个BMKPinAnnotationView实例</div></div></div><div class="table_wrap_w"><div><div class="table-wrap-className">BMKMapView</div></div><div><div>- (void)addAnnotation:(id &lt;BMKAnnotation&gt;)annotation;</div></div><div><div>向地图窗口添加点标记</div></div></div><div class="table_wrap_w"><div><div class="table-wrap-className">UIView</div></div><div><div>+ (void)animateWithDuration:(NSTimeInterval)durationdelay:(NSTimeInterval)delayoptions:(UIViewAnimationOptions)options animations:(void (^)(void))animations completion:(void (^ __nullable)(BOOLfinished))completion API_AVAILABLE(ios(4.0));</div></div><div><div>基于UIView动画完成平移</div></div></div></div></div></div></div></div><div class="pre-nav"><div class="left-icon"></div><div>核心代码</div></div><div class="pre-wrap"><div class="pre-wrap-nav"><div>Objective-C</div></div><div class="pre-wrap-w pre-wrap-w-ios code_container"><!-- ios示例代码位置 --><pre class="prettyprint prettyprinted pre-ios">//添加平移动画
+
</div><div class="video-icon-ios"><div class="play play-ios"></div><div class="stop stop-ios"></div></div></div><div class="progressWrap-hide-ios"></div><div id="videoControls-ios"><div id="progressWrap-ios"><div id="playProgress-ios"></div></div></div></div><div class="left-qrCode iosqrCode"><!-- ios二维码位置 --><div class="qrCode-ios">1590746640|//mapopen-website-wiki.bj.bcebos.com/demos/ioscodes/点标记平移动画@1xios.png</div><div>扫码体验</div></div></div><div class="wrap_right"><div class="wrap_right_nav"><div class="wrap_right_nav_l"><div>使用产品</div><div><!-- IOS使用产品下选项,可有多个 --><div class="documentA">iOS地图SDK|/index.php?title=iossdk</div><!--  --><div>></div><div class="documentA">点标记动画|/index.php?title=iossdk/guide/map-render/animation</div></div></div><div class="wrap_right_nav_r">下载源码</div><!-- IOS源码地址 --><div class="github-url-ios">//mapopen-website-wiki.bj.bcebos.com/BaiduMapSDKDemo.zip</div></div><div class="wrap_table"><div class="table_nav"><div class="left-icon"></div><div>核心接口</div></div><div class="table_wrap"><div class="table_wrap_title"><div>类</div><div>接口</div><div>描述</div></div><!-- ios表格接口内容,可有多个 --><!-- 表格接口,可有多个 --><div class="table_wrap_con"><div class="table_wrap_w"><div><div class="table-wrap-className">BMKPointAnnotation</div></div><div><div>- (instancetype)init</div></div><div><div>创建点标记实例</div></div></div><!--  --><div class="table_wrap_w"><div><div class="table-wrap-className">BMKPointAnnotation</div></div><div><div>CLLocationCoordinate2D coordinate;</div></div><div><div>设置点标记经纬度坐标</div></div></div><div class="table_wrap_w"><div><div class="table-wrap-className">BMKPointAnnotation</div></div><div><div>NSString *title;</div></div><div><div>设置显示的标题</div></div></div><div class="table_wrap_w"><div><div class="table-wrap-className">BMKPinAnnotationView</div></div><div><div>- (id)initWithAnnotation:(id&lt;BMKAnnotation&gt;)annotationreuseIdentifier:(NSString *)reuseIdentifier;</div></div><div><div>初始化并返回一个BMKPinAnnotationView实例</div></div></div><div class="table_wrap_w"><div><div class="table-wrap-className">BMKMapView</div></div><div><div>- (void)addAnnotation:(id &lt;BMKAnnotation&gt;)annotation;</div></div><div><div>向地图窗口添加点标记</div></div></div><div class="table_wrap_w"><div><div class="table-wrap-className">UIView</div></div><div><div>+ (void)animateWithDuration:(NSTimeInterval)durationdelay:(NSTimeInterval)delayoptions:(UIViewAnimationOptions)options animations:(void (^)(void))animations completion:(void (^ __nullable)(BOOLfinished))completion API_AVAILABLE(ios(4.0));</div></div><div><div>基于UIView动画完成平移</div></div></div></div></div></div></div></div><div class="pre-nav"><div class="left-icon"></div><div>核心代码</div></div><div class="pre-wrap"><div class="pre-wrap-nav"><div>Objective-C</div></div><div class="pre-wrap-w pre-wrap-w-ios code_container"><!-- ios示例代码位置 --><pre class="prettyprint prettyprinted pre-ios">//添加平移动画
 
- (void)addAnimationWithLocation:(CLLocationCoordinate2D)location {
 
- (void)addAnimationWithLocation:(CLLocationCoordinate2D)location {
 
     [UIView animateWithDuration:2.0
 
     [UIView animateWithDuration:2.0

2022年2月25日 (五) 17:25的最后版本

点标记平移动画
功能场景
需要展示点标记在地图上的移动效果时可使用,平移效果流畅。
Android
iOS
//mapopen-website-wiki.bj.bcebos.com/demos/AndroidVideos/Android点标记平移动画.mp4
1590746640|//mapopen-website-wiki.bj.bcebos.com/demos/newqrcodes/点标记平移动画.png
扫码体验
使用产品
Android地图SDK|/index.php?title=androidsdk
>
点标记动画|/index.php?title=androidsdk/guide/render-map/animation
下载源码
//mapopen-website-wiki.bj.bcebos.com/demos/BaiduMapSDKExample.zip
核心接口
接口
描述
备注
Transformation
Transformation(LatLng... latlng)
平移动画构造方法,传入要平移的经纬度坐标
V5.1.0起
Transformation
setDuration(long animationTime)
设置平移动画时长
V5.1.0起
Transformation
TsetAnimationListener(AnimationListener listener)
设置平移动画监听器
V5.1.0起
Transformation
setInterpolator(Interpolator interpolator)
设置平移动画差值器
V5.1.0起
Transformation
setRepeatMode(RepeatMode repeatMode)
设置平移动画重复模式
V5.1.0起
Transformation
setRepeatCount(int count)
设置平移动画重复次数
V5.1.0起
Transformation
cancel()
取消平移动画
V5.1.0起
Aniamtion.AnimationListener()
onAnimationStart()
动画开始回调
V5.1.0起
Aniamtion.AnimationListener()
onAnimationEnd()
动画结束回调
V5.1.0起
Aniamtion.AnimationListener()
onAnimationCancel()
动画取消回调
V5.1.0起
Marker
setAnimation(Animation animation)
设置动画
V5.1.0起
Marker
startAnimation()
启动动画
V5.1.0起
Marker
cancelAnimation()
取消动画
V5.1.0起
MarkerOptions
position(LatLng latlng)
配置Marker经纬度
V5.1.0起
MarkerOptions
icon(BitmapDescriptor bitmapDescriptor)
配置Marker图标
V5.1.0起
核心代码
1.构造平移动画
JAVA
Transformation transformation = new Transformation(mMarker.getPosition(), mLatLng);
transformation.setDuration(3000);
transformation.setAnimationListener(new Animation.AnimationListener() {
    @Override
    public void onAnimationStart() {
    }

    @Override
    public void onAnimationEnd() {
    }

    @Override
    public void onAnimationCancel() {
    }

    @Override
    public void onAnimationRepeat() {

    }
});
                    
                
复制
深色
复制成功
2.设置、开启、取消动画
JAVA
mMarker.setAnimation(transformation);
mMarker.startAnimation();
mMarker.cancelAnimation();
                
复制
深色
复制成功
更多功能
添加文字和信息窗|/index.php?title=androidsdk/guide/render-map/text
  • 文档根本没法用

  • 文档水平很差

  • 文档水平一般

  • 文档不错

  • 文档写的很好

如发现文档错误,或对此文档有更好的建议,请在下方反馈。问题咨询请前往反馈平台提交工单咨询。

提交反馈

拖动标注工具

添加矩形标注

添加箭头标注

完成

取消