_Nora_
_Nora_
  • 发布:2022-09-07 19:52
  • 更新:2025-11-13 11:18
  • 阅读:801

APP-IOS端使用map组件,手指在customCallout上时无法拖动地图

分类:nvue

<template>    
  <view class="content">    
    <map class="map" id="map1" ref="map1" :controls="controls" :scale="scale" :longitude="location.longitude"    
      :latitude="location.latitude" :show-location="showLocation" :rotate="rotate" :skew="skew" show-scale="true"    
      :markers="markers" enable-building=true enable-indoorMap="true" @callouttap="oncallouttap">    
      <cover-view slot="callout">    
        <cover-view marker-id="1">    
          <cover-image class="icon" src="/static/logo.png"></cover-image>    
          <cover-view class="test">    
            customCallout    
          </cover-view>    
        </cover-view>    
      </cover-view>    
    </map>    
  </view>    
</template>    

<script>    
  const testMarkers = [{    
    id: 1,    
    latitude: 39.9086920000,    
    longitude: 116.3974770000,    
    title: '天安门',    
    zIndex: '1',    
    iconPath: '/static/gif.gif',    
    width: 40,    
    height: 40,    
    anchor: {    
      x: 0.5,    
      y: 1    
    },    
    callout: {    
      content: '首都北京\n天安门',    
      color: '#00BFFF',    
      fontSize: 12,    
      borderRadius: 2,    
      borderWidth: 0,    
      borderColor: '#333300',    
      bgColor: '#CCFF11',    
      padding: '1',    
      display: 'ALWAYS'    
    },    
    customCallout: {    
      anchorY: 0,    
      anchorX: 0,    
      display: 'ALWAYS'    
    }    
  }];    

  module.exports = {    
    data() {    
      return {    
        location: {    
          longitude: 116.3974770000,    
          latitude: 39.9086920000    
        },    
        controls: [{    
          id: 1,    
          position: {    
            left: 5,    
            top: 180,    
            width: 30,    
            height: 30    
          },    
          iconPath: '/static/logo.png',    
          clickable: true    
        }],    
        showLocation: false,    
        scale: 13,    
        enableZoom: true,    
        polyline: [],    
        markers: testMarkers,    
        polygons: [],    
        circles: [],    
        includePoints: [],    
        rotate: 0,    
        skew: 0    
      }    
    },    
    methods: {    
      oncallouttap(e) {    
        uni.showModal({    
          content: JSON.stringify(e)    
        })    
      }    
    }    
  }    
</script>    

<style>    
  .content {    
    flex: 1;    
  }    

  .map {    
    width: 750rpx;    
    height: 250px;    
    background-color: #f0f0f0;    
  }    

  .icon {    
    width: 20px;    
    height: 20px;    
  }    

  .scrollview {    
    flex: 1;    
    padding: 10px;    
  }    

  .list-item {    
    flex-direction: row;    
    flex-wrap: nowrap;    
    align-items: center;    
    padding: 5px 0px;    
  }    

  .list-text {    
    flex: 1;    
  }    

  .button {    
    margin-top: 5px;    
    margin-bottom: 5px;    
  }    
</style>
2022-09-07 19:52 负责人:无 分享
已邀请:
DCloud_UNI_Anne

DCloud_UNI_Anne

问题复现,已给相关人员排查,已加分感谢反馈!

DCloud_iOS_XHY

DCloud_iOS_XHY

这是高德地图默认实现,不管是默认的 callout 还是 customCallout 都一样的,属于是平台差异

  • _Nora_ (作者)

    就是说IOS端这个问题无解是吗?为什么参考其他使用高德地图的APP,可以实现呢?

    2022-09-09 10:03

  • _Nora_ (作者)

    你好,我想得到明确的回复,你们是否会解决这个问题?

    2022-09-14 09:23

  • DCloud_iOS_XHY

    回复 1***@qq.com: 暂时不会哦,这个是高德sdk默认实现就是这样

    2022-09-14 11:51

kkcode

kkcode

这不应该是正常的吗?!?

  • _Nora_ (作者)

    你没话说可以不回复,非要来刷个存在感吗

    2023-11-29 17:28

1***@163.com

1***@163.com

2025了还没解决 该咋写啊

2***@qq.com

2***@qq.com - 惺惺相惜先惺惺相惜先想

当手指触摸在 customCallout 上时,触摸事件会被气泡视图拦截,无法传递给底层的地图视图,导致地图无法响应拖动操作。

解决方案
方案1:继承自定义气泡并重写 hitTest 方法
objc
@interface CustomCalloutView : UIView
@end

@implementation CustomCalloutView

  • (UIView )hitTest:(CGPoint)point withEvent:(UIEvent )event {
    UIView *hitView = [super hitTest:point withEvent:event];

    // 如果点击的是气泡本身或其子视图,返回nil让事件继续传递
    if (hitView == self || [hitView isDescendantOfView:self]) {
    return nil;
    }

    return hitView;
    }

@end
方案2:使用手势穿透
objc
// 在创建customCallout时添加
UITapGestureRecognizer tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:nil];
tap.cancelsTouchesInView = NO;
[calloutView addGestureRecognizer:tap];
方案3:自定义 AnnotationView 完整示例
objc
@interface CustomAnnotationView : MAAnnotationView
@property (nonatomic, strong) CustomCalloutView
calloutView;
@end

@implementation CustomAnnotationView

  • (void)setSelected:(BOOL)selected animated:(BOOL)animated {
    [super setSelected:selected animated:animated];

    if (selected) {
    if (!self.calloutView) {
    self.calloutView = [[CustomCalloutView alloc] init];
    // 设置calloutView的frame和内容
    }
    [self addSubview:self.calloutView];
    } else {
    [self.calloutView removeFromSuperview];
    }
    }

@end
方案4:高德地图官方推荐方式
高德地图官方推荐通过设置 canAdjustPositon 属性来优化:

objc
// 在自定义的MAAnnotationView中
self.canAdjustPositon = YES; // 允许调整位置以避免遮挡

2***@qq.com

2***@qq.com - 惺惺相惜先惺惺相惜先想

@DCloud_iOS_XHY

要回复问题请先登录注册