<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
- 更新:2025-11-13 11:18
- 阅读:801
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; // 允许调整位置以避免遮挡

1***@163.com
到现在都没修复吗?
2025-08-23 14:15