“自定义点标记图标”的版本间的差异

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

自定义点标记图标

功能场景

开发者可根据app风格使用自定义的标记样式，更加符合业务场景和特色。

//mapopen-website-wiki.bj.bcebos.com/demos/AndroidVideos/自定义标注点.mp4

1590746640|//mapopen-website-wiki.bj.bcebos.com/demos/newqrcodes/自定义点标记.png

扫码体验

使用产品

Android地图SDK|/index.php?title=androidsdk

>

绘制自定义Marker|/index.php?title=androidsdk/guide/render-map/point

下载源码

//mapopen-website-wiki.bj.bcebos.com/demos/BaiduMapSDKExample.zip

核心接口

类

接口

描述

MarkerOptions

icon(BitmapDescriptor icon)

设置marker图标

MarkerOptions

position(LatLng position)

设置 marker 覆盖物的位置坐标

BaiduMap

addOverlay(OverlayOptions options)

向地图添加一个 Overlay

BitmapDescriptorFactory

fromResource(int resourceId)

根据资源Id创建不适配设备像素密度的bitmap描述信息

Marker

setIcon(BitmapDescriptor bitmap)

设置markerIcon

核心代码

1.创建marker

JAVA

MarkerOptions markerOptions = new MarkerOptions()
            .position(center)//Marker经纬度
            .icon(mBitmapDescriptorStart);
mMarker = (Marker) mBaiduMap.addOverlay(markerOptions);

复制

深色

复制成功

2.更新marker图标

mMarker.setIcon(mBitmapDescriptorEnd);

更多功能

绘制线|/index.php?title=androidsdk/guide/render-map/ployline

绘制弧线和面|/index.php?title=androidsdk/guide/render-map/ploygon

//mapopen-website-wiki.bj.bcebos.com/demos/iosVideos/iOS自定义标注图标.mov

1590746640|//mapopen-website-wiki.bj.bcebos.com/demos/ioscodes/自定义点标记图标@1xios.png

扫码体验

使用产品

iOS地图SDK|/index.php?title=iossdk

>

自定义标注图标|/index.php?title=iossdk/guide/map-render/point

下载源码

//mapopen-website-wiki.bj.bcebos.com/BaiduMapSDKDemo.zip

核心接口

类

接口

描述

BMKCustomAnnotationView

- (id)initWithAnnotation:(id<BMKAnnotation>)annotationreuseIdentifier:(NSString*)reuseIdentifier;

标注自定义

BMKMapView

- (BMKAnnotationView *)mapView:(BMKMapView *)mapView viewForAnnotation:(id<BMKAnnotation>)annotation;

向地图添加标注

核心代码

Objective-C

/** 根据anntation生成对应的annotationView. */
- (BMKAnnotationView *)mapView:(BMKMapView *)mapView viewForAnnotation:(id<BMKAnnotation>)annotation {
        BMKCustomAnnotationView *annotationView = (BMKCustomAnnotationView *)[mapView dequeueReusableAnnotationViewWithIdentifier:annotationViewIdentifier];
    if (!annotationView) {
        /**
            初始化并返回一个annotationView
            
            @param annotation 关联的annotation对象
            @param reuseIdentifier 如果要重用view，传入一个字符串，否则设为nil，建议重用view
            @return 初始化成功则返回annotationView，否则返回nil
            */
        annotationView = [[BMKCustomAnnotationView alloc] initWithAnnotation:annotation reuseIdentifier:annotationViewIdentifier];
        
    }
    return annotationView;

}
// 自定义标注代码

/**
    初始化并返回一个annotationView
    
    @param annotation 关联的annotation对象
    @param reuseIdentifier 如果要重用view，传入一个字符串，否则设为nil，建议重用view
    @return 初始化成功则返回annotation view，否则返回nil
    */
- (id)initWithAnnotation:(id<BMKAnnotation>)annotation reuseIdentifier:(NSString *)reuseIdentifier {
    self = [super initWithAnnotation:annotation reuseIdentifier:reuseIdentifier];
    if (self) {
        self.frame = CGRectMake(0, 0, 32, 32);
        UIImageView *annotationImage = [[UIImageView alloc] initWithFrame:self.frame];
        annotationImage.animationImages = @[[UIImage imageNamed:@"greenAnimationIcon"], [UIImage imageNamed:@"blackAnimationIcon"], [UIImage imageNamed:@"redAnimationIcon"]];
        annotationImage.animationDuration = 0.5 * 3;
        annotationImage.animationRepeatCount = 0;
        [annotationImage startAnimating];
        [self addSubview:annotationImage];
    }
    return self;
}

复制

深色

复制成功

更多功能

绘制线|/index.php?title=iossdk/guide/map-render/ployline

绘制弧线和面|/index.php?title=iossdk/guide/map-render/ploygon

@@ 第1行： / 第1行： @@
 <div id="examples_center"><!-- 页面标题 --><div class="title-hd">自定义点标记图标</div><!-- 标题下子标题及简介，可有多个 --><div class="title-mi">功能场景</div><div class="wrap-mi">开发者可根据app风格使用自定义的标记样式，更加符合业务场景和特色。</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/自定义标注点.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">绘制自定义Marker|/index.php?title=androidsdk/guide/render-map/point</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 class="table_wrap_con"><div class="table_wrap_w"><div><div class="table-wrap-className">MarkerOptions</div></div><div><div>icon(BitmapDescriptor icon)</div></div><div><div>设置marker图标</div></div></div><!--  --><div class="table_wrap_w"><div><div class="table-wrap-className">MarkerOptions</div></div><div><div>position(LatLng position)</div></div><div><div>设置 marker 覆盖物的位置坐标</div></div></div><div class="table_wrap_w"><div><div class="table-wrap-className">BaiduMap</div></div><div><div>addOverlay(OverlayOptions options)</div></div><div><div>向地图添加一个 Overlay</div></div></div><div class="table_wrap_w"><div><div class="table-wrap-className">BitmapDescriptorFactory</div></div><div><div>fromResource(int resourceId)</div></div><div><div>根据资源Id创建不适配设备像素密度的bitmap描述信息</div></div></div><div class="table_wrap_w"><div><div class="table-wrap-className">Marker</div></div><div><div>setIcon(BitmapDescriptor bitmap)</div></div><div><div>设置markerIcon</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.创建marker</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">MarkerOptions markerOptions = new MarkerOptions()
+</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">绘制自定义Marker|/index.php?title=androidsdk/guide/render-map/point</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 class="table_wrap_con"><div class="table_wrap_w"><div><div class="table-wrap-className">MarkerOptions</div></div><div><div>icon(BitmapDescriptor icon)</div></div><div><div>设置marker图标</div></div></div><!--  --><div class="table_wrap_w"><div><div class="table-wrap-className">MarkerOptions</div></div><div><div>position(LatLng position)</div></div><div><div>设置 marker 覆盖物的位置坐标</div></div></div><div class="table_wrap_w"><div><div class="table-wrap-className">BaiduMap</div></div><div><div>addOverlay(OverlayOptions options)</div></div><div><div>向地图添加一个 Overlay</div></div></div><div class="table_wrap_w"><div><div class="table-wrap-className">BitmapDescriptorFactory</div></div><div><div>fromResource(int resourceId)</div></div><div><div>根据资源Id创建不适配设备像素密度的bitmap描述信息</div></div></div><div class="table_wrap_w"><div><div class="table-wrap-className">Marker</div></div><div><div>setIcon(BitmapDescriptor bitmap)</div></div><div><div>设置markerIcon</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.创建marker</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">MarkerOptions markerOptions = new MarkerOptions()
              .position(center)//Marker经纬度
              .icon(mBitmapDescriptorStart);
@@ 第7行： / 第7行： @@
                  </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="pre-nav"><div>2.更新marker图标</div></div><div class="pre-nav"><div style="margin-left: 10px;">mMarker.setIcon(mBitmapDescriptorEnd);</div></div><div class="more-nav"><div class="left-icon"></div><div>更多功能</div></div><div class="more-wrap"><!-- IOS更多功能下选项 --><!-- 点标记动画|/index.php?title=test --><div><div class="point"></div><div class="documentA">绘制线|/index.php?title=androidsdk/guide/render-map/ployline</div></div><div><div class="point"></div><div class="documentA">绘制弧线和面|/index.php?title=androidsdk/guide/render-map/ploygon</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/point</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">BMKCustomAnnotationView</div></div><div><div>- (id)initWithAnnotation:(id&lt;BMKAnnotation&gt;)annotationreuseIdentifier:(NSString*)reuseIdentifier;</div></div><div><div>标注自定义</div></div></div><!--  --><div class="table_wrap_w"><div><div class="table-wrap-className">BMKMapView</div></div><div><div>- (BMKAnnotationView *)mapView:(BMKMapView *)mapView viewForAnnotation:(id&lt;BMKAnnotation&gt;)annotation;</div></div><div><div>向地图添加标注</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">/** 根据anntation生成对应的annotationView. */
+</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/point</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">BMKCustomAnnotationView</div></div><div><div>- (id)initWithAnnotation:(id&lt;BMKAnnotation&gt;)annotationreuseIdentifier:(NSString*)reuseIdentifier;</div></div><div><div>标注自定义</div></div></div><!--  --><div class="table_wrap_w"><div><div class="table-wrap-className">BMKMapView</div></div><div><div>- (BMKAnnotationView *)mapView:(BMKMapView *)mapView viewForAnnotation:(id&lt;BMKAnnotation&gt;)annotation;</div></div><div><div>向地图添加标注</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">/** 根据anntation生成对应的annotationView. */
 - (BMKAnnotationView *)mapView:(BMKMapView *)mapView viewForAnnotation:(id<BMKAnnotation>)annotation {
          BMKCustomAnnotationView *annotationView = (BMKCustomAnnotationView *)[mapView dequeueReusableAnnotationViewWithIdentifier:annotationViewIdentifier];

文档全面上新

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