关于是否支持map的customCallout

分类：uni-app

微信小程序原生的map支持自定义气泡customCallout，uni-app现在还不支持吗

2020-08-13 22:22 负责人:无分享

4 个回复

七月羽歌 - www.qiubg.com

支持啊。请看文档：

https://uniapp.dcloud.io/component/map?id=map

https://developers.weixin.qq.com/miniprogram/dev/component/map.html

可以这么来

定义 map 和数据。

        <map  
            id="map"  
            ref="map"  
            :show-location="true"  
            :scale="map.scale"  
            :markers="map.markers"  
            @regionchange="regionchange"  
            @updated="updated"  
            @markertap="touch"  
        >  
            <cover-view slot="callout">  
                <cover-view v-for="(item, index) in map.callouts" :marker-id="item" class="callout-bg">  
                    <cover-view class="text-color-2 text-size-26 callout-label">{{map.list[item]['label']}}</cover-view>  
                    <cover-view class="text-color-2 text-size-26 callout-value">{{map.list[item]['value']}}</cover-view>  
                </cover-view>  
            </cover-view>  
        </map>

这里很重要的三个数据：map.markers、map.callouts、map.list。 map.markers 中定义 id，经纬度，customCallout这些。并设置宽高都为 0。而 customCallout 就那么几个值（display，anchorX，anchorY）。map.callouts 是个数组，就是 map.markers 中 id 组成的数组，map.list 是一个 object，其 key 就是上边的 id，值也是一个 object，比如区域，数字等。就是你要使用 customCallou 的目的。自定义所要用到的数据就放在 map.list 里。

那么开始渲染真正的数据。

data() {  
return {  
 map: {  
scale: 13,  
markers: [],  
callouts: [],  
list: null  
 }  
}  
},  
onLoad() {  
this.initialize();  
},  
methods: {  
initialize() {  
let cityList = [  
                {  
                    area: {  
                        label: '奉贤区',  
                        value: '310120'  
                    },  
                    count: 1,  
                    position: [30.91803, 121.4741],  
                    radius: 30  
                },  
                {  
                    area: {  
                        label: '杨浦区',  
                        value: '310110'  
                    },  
                    count: 1,  
                    position: [31.25956, 121.52609],  
                    radius: 30  
                },  
                {  
                    area: {  
                        label: '黄浦区',  
                        value: '310101'  
                    },  
                    count: 2,  
                    position: [31.23162, 121.48461],  
                    radius: 30  
                }];  

        let markers = [];  
        let callouts = [];  
        let list = {};  
        for (let item of cityList) {  
            let marker = {  
                id: parseInt(item.area.value),  
                latitude: item.position[0],  
                longitude: item.position[1],  
                width: 0,  
                height: 0,  
                customCallout: {  
                    display: 'ALWAYS',  
                    anchorY: 0,  
                    anchorY: 40  
                }  
            };  
            markers.push(marker);  
            callouts.push(marker.id);  
            list[marker.id] = {  
                label: item.area.label,  
                value: item.count  
            }  
        }  
        this.map.list = list;  
        this.map.callouts = callouts;  
        this.map.markers = markers;  

}  
}

再看 css 样式：

    .callout-bg {  
        display: flex;  
        flex-direction: column;  
        justify-content: center;  
        align-items: center;  
        background-color: #477ee8;    
        width: 80px;  
        height: 80px;  
        border-radius: 50%;  
        z-index: 9999;  

        .callout-label {  
            margin-bottom: 8px;  
        }  
    }

1***@qq.com

感谢老哥

2021-08-10 21:32
李yiyi

为啥我这么写气泡出不来？

2021-08-25 16:54
咸鱼三月丶

回复李yiyi: cover -view 要写在map标签里面哦

2021-08-27 11:22
李yiyi

回复 1***@qq.com: 是写在里面的

2021-08-27 15:57
李yiyi

回复 1***@qq.com: 它需要再次点击才能显示出来，之后切换就都能出来了，就是首次出不来

2021-08-27 15:58
李yiyi

回复 1***@qq.com: 我在cover-view里面用了cover-image，是图片出不来（唉

2021-08-27 15:59
小E

回复李yiyi: 点击两次才显示customCallout的问题，你解决了吗？

2022-02-14 16:24

3***@qq.com - 1

同问感觉是不支持

huicanvie (作者)

嗯，文档中没有这个属性

2020-08-15 10:30
3***@qq.com

回复 huicanvie: 原生小程序可以吗?真机测试我这直接固定在屏幕上了，没有跟随marker点，

2020-08-15 13:04
huicanvie (作者)

回复 3***@qq.com: 原生的v2.12.0版本以上都支持customCallout了。自己写的话，无法跟随marker点移动，这个就蛋疼了

2020-08-16 00:20