y***@163.com
y***@163.com
  • 发布:2023-07-27 14:06
  • 更新:2023-07-27 14:06
  • 阅读:182

marker的自定义气泡 在地图放大后会重叠在一个marker

分类:nvue
<template>  
    <view style="flex: 1;">  
        <map id="map" :enablePoi="mapConf.enablePoi" :showLocation="mapConf.showLocation" :scale="mapConf.scale"  
            :enableTraffic="mapConf.enableTraffic" :enable-overlooking="true" :enableBuilding="mapConf.enableBuilding"  
            class="map" ref="map" :latitude="latitude" :longitude="longitude" :markers="markers"  
            :showScale="mapConf.showScale" @regionchange="regionchange" @callouttap="markerTap">  
            <cover-view slot="callout" v-if="markers.length>0">  
                <cover-view v-for="(item,index) in markers" :marker-id="item.id" style="width: 50rpx;height: 50rpx;">  
                    <text class="place-sort">{{item.id}}</text>  
                </cover-view>  
            </cover-view>  
        </map>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                longitude: 121.39973280164931,  
                latitude: 31.167666829427084,  
                mapConf: {  
                    isPulling: true,  
                    enablePoi: false, //是否展示 POI 点  
                    showLocation: false, // 显示带有方向的当前定位点  
                    enableTraffic: true, //是否开启实时路况  
                    showScale: false,  
                    enableBuilding: true,  
                    scale: 16,  
                },  
                markers: [{  
                        "id": 0,  
                        "latitude": "31.167666829427084",  
                        "longitude": "121.39973280164931",  
                        "iconPath": "/static/images/route/tou.png",  
                        "width": 32,  
                        "height": 32,  
                        "customCallout": {  
                            "anchorY": 24,  
                            "anchorX": 0,  
                            "display": "ALWAYS"  
                        }  
                    },  
                    {  
                        "id": 1,  
                        "latitude": "31.128817",  
                        "longitude": "121.432647",  
                        "iconPath": "/static/images/route/tou.png",  
                        "width": 22,  
                        "height": 22,  
                        "customCallout": {  
                            "anchorY": 24,  
                            "anchorX": 0,  
                            "display": "ALWAYS"  
                        }  
                    },  
                    {  
                        "id": 2,  
                        "latitude": "31.115505",  
                        "longitude": "121.458106",  
                        "iconPath": "/static/images/route/tou.png",  
                        "width": 22,  
                        "height": 22,  
                        "customCallout": {  
                            "anchorY": 24,  
                            "anchorX": 0,  
                            "display": "ALWAYS"  
                        }  
                    },  
                    {  
                        "id": 3,  
                        "latitude": "31.193771",  
                        "longitude": "121.434787",  
                        "iconPath": "/static/images/route/tou.png",  
                        "width": 22,  
                        "height": 22,  
                        "customCallout": {  
                            "anchorY": 24,  
                            "anchorX": 0,  
                            "display": "ALWAYS"  
                        }  
                    }  
                ],  
            }  
        }  
    }  
</script>  

<style>  
    .map {  
        width: 750rpx;  
        flex: 1;  
    }  

    .place-sort {  
        background-color: #fff;  
        font-size: 28rpx;  
        border-radius: 50rpx;  
        color: #fff;  
        border: 4rpx solid #fff;  
        background-color: red;  
        width: 50rpx;  
        height: 50rpx;  
        font-weight: bold;  
        text-align: center;  
    }  
</style>
2023-07-27 14:06 负责人:无 分享
已邀请:

要回复问题请先登录注册