控制台

多信息弹窗/气泡效果

该示例主要展示如何在地图上显示多个信息窗体/气泡（Infowindow/callout）。
iOS Android
下载源代码
00:00 / 00:12
体验移动端 扫码体验移动端

使用场景

自定义AnnotationView实现多个气泡弹窗效果。

当用户需要在地图上显示多个气泡弹窗效果时，利用该功能可以实现。

用到产品

iOS 地图 SDK

核心类/接口

类

接口

说明

版本

AMapSearchAPI

- (void)AMapPOIKeywordsSearch:(AMapPOIKeywordsSearchRequest *)request;;

POI 关键字查询接口

V4.0.0版本起

MAInfowindowView

---

继承自MAAnnotationView，实现了弹出框样式的自定义annotationView。

---

核心难点

自定义绘制弹出框效果AnnotaitonView

Objective-CSwift
- (void)drawRect:(CGRect)rect
{
    [self drawInContext:UIGraphicsGetCurrentContext()];

    self.layer.shadowColor = [[UIColor grayColor] CGColor];
    self.layer.shadowOpacity = 1.0;
    self.layer.shadowOffset = CGSizeMake(0.0f, 0.0f);
}

- (void)drawInContext:(CGContextRef)context
{
    CGContextSetLineWidth(context, 1.0);
    CGContextSetFillColorWithColor(context, kBackgroundColor.CGColor);
    [self getDrawPath:context];
    CGContextFillPath(context);
}

- (void)getDrawPath:(CGContextRef)context
{
    CGRect rrect = self.bounds;
    CGFloat radius = 6.0;
    CGFloat minx = CGRectGetMinX(rrect),
    midx = CGRectGetMidX(rrect),
    maxx = CGRectGetMaxX(rrect);
    CGFloat miny = CGRectGetMinY(rrect),
    maxy = CGRectGetMaxY(rrect)-kArrorHeight;

    CGContextMoveToPoint(context, midx+kArrorHeight, maxy);
    CGContextAddLineToPoint(context,midx, maxy+kArrorHeight);
    CGContextAddLineToPoint(context,midx-kArrorHeight, maxy);

    CGContextAddArcToPoint(context, minx, maxy, minx, miny, radius);
    CGContextAddArcToPoint(context, minx, minx, maxx, miny, radius);
    CGContextAddArcToPoint(context, maxx, miny, maxx, maxx, radius);
    CGContextAddArcToPoint(context, maxx, maxy, midx, maxy, radius);
    CGContextClosePath(context);
}

/* 自定义绘制弹出框效果annotaitonView. */
override func draw(_ rect: CGRect) {
    self.draw(context: UIGraphicsGetCurrentContext()!)
    self.layer.shadowColor = UIColor.gray.cgColor
    self.layer.shadowOpacity = 1.0
    self.layer.shadowOffset = CGSize(width: CGFloat(0.0), height: CGFloat(0.0))
}

func draw(context: CGContext) {
    context.setLineWidth(CGFloat(1.0))
    context.setFillColor(kBackgroundColor.cgColor)
    self.getDrawPath(context:context)
    context.fillPath()
}

func getDrawPath(context: CGContext) {
    let rrect: CGRect = self.bounds
    let radius: CGFloat = 6.0
    let minx: CGFloat = rrect.minX
    let midx: CGFloat = rrect.midX
    let maxx: CGFloat = rrect.maxX
    let miny: CGFloat = rrect.minY
    let maxy: CGFloat = rrect.maxY - kArrorHeight
    context.move(to: CGPoint(x: CGFloat(midx + kArrorHeight), y: maxy))
    context.addLine(to: CGPoint(x: midx, y: CGFloat(maxy + kArrorHeight)))
    context.addLine(to: CGPoint(x: CGFloat(midx - kArrorHeight), y: maxy))
    context.addArc(tangent1End: CGPoint(x: minx, y: maxy), tangent2End: CGPoint(x: minx, y: miny), radius: radius)
    context.addArc(tangent1End: CGPoint(x: minx, y: minx), tangent2End: CGPoint(x: maxx, y: miny), radius: radius)
    context.addArc(tangent1End: CGPoint(x: maxx, y: miny), tangent2End: CGPoint(x: maxx, y: maxx), radius: radius)
    context.addArc(tangent1End: CGPoint(x: maxx, y: maxy), tangent2End: CGPoint(x: midx, y: maxy), radius: radius)
    context.closePath()
}
下载源代码
00:00 / 00:12
体验移动端 扫码体验移动端

使用场景

自定义Overlay实现多个气泡弹窗效果。

当用户需要在地图上显示多个气泡弹窗效果时，利用该功能可以实现。

用到产品

Android 地图 SDK

核心类/接口

类

接口

说明

版本

AMap

public final void moveCamera(CameraUpdate update)

按照传入的CameraUpdate参数移动可视区域。

这个方法为瞬间移动，没有移动过程，如果在调用此方法后再调用getCameraPosition()将返回移动后位置。

V2.0.0版本起

BitmapDescriptorFactory

public static BitmapDescriptor fromView(View view)

根据传入的view，创建BitmapDescriptor对象。

V2.1.3版本起

核心难点

继承PoiOverlay实现自定义view内容处理

Java
public static LatLng convertToLatLng(LatLonPoint latLonPoint) {
       if (latLonPoint ==null){
           return null;
       }
       return new LatLng(latLonPoint.getLatitude(), latLonPoint.getLongitude());
   }

   public class ViewPoiOverlay extends PoiOverlay{

       public ViewPoiOverlay(AMap aMap, List<PoiItem> list) {
           super(aMap, list);
       }

       @Override
       protected BitmapDescriptor getBitmapDescriptor(int index) {
           View view = null;
           view = View.inflate(MainActivity.this, R.layout.custom_view, null);
           TextView textView = ((TextView) view.findViewById(R.id.title));
           textView.setText(getTitle(index));

           return  BitmapDescriptorFactory.fromView(view);
       }

 

返回顶部 示例中心 常见问题 智能客服 公众号
二维码