zhengyu
zhengyu
  • 发布:2024-06-02 16:40
  • 更新:2024-06-14 11:07
  • 阅读:79

【报Bug】nvue使用Google地图,更新circles之后,之前配置的circles没有因为数据更新而被清除掉,高德的就会清除

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Mac

PC开发环境操作系统版本号: 14.2.1 (23C71)

HBuilderX类型: Alpha

HBuilderX版本号: 4.15

手机系统: iOS

手机系统版本号: iOS 17

手机厂商: 模拟器

手机机型: iPhone 15

页面类型: nvue

vue版本: vue3

打包方式: 云端

项目创建方式: HBuilderX

操作步骤:
<template>  
    <view class="content">  
        <map class="map" ref="map1" :controls="controls" :scale="scale" :longitude="location.longitude" :latitude="location.latitude"  
            :show-location="showLocation" :enable-3D="enable3D" :rotate="rotate" :skew="skew" :show-compass="showCompass"  
            :enable-overlooking="enableOverlooking" :enable-zoom="enableZoom" :enable-scroll="enableScroll"  
            :enable-rotate="enableRotate" :enable-satellite="enableSatellite" :enable-traffic="enableTraffic" :markers="markers"  
            :polyline="polyline" :circles="circles" :polygons="polygons" :include-points="includePoints"></map>  
        <view class="line"></view>  
        <uni-list class="scrollview">  
            <uni-list-item :show-arrow="false" :show-switch="true" :switch-checked="enable3D" title="显示3D楼块" @switchChange="enableThreeD" />  
            <uni-list-item :show-arrow="false" :show-switch="true" :switch-checked="showCompass" title="显示指南针" @switchChange="changeShowCompass" />  
            <!-- <uni-list-item :show-arrow="false" :show-switch="true" :switch-checked="enableOverlooking" title="开启俯视" @switchChange="changeEnableOverlooking" /> -->  
            <!-- <uni-list-item :show-arrow="false" :show-switch="true" :switch-checked="enableZoom" title="是否支持缩放" @switchChange="changeEnableZoom" /> -->  
            <!-- <uni-list-item :show-arrow="false" :show-switch="true" :switch-checked="enableScroll" title="是否支持拖动" @switchChange="changeEnableScroll" /> -->  
            <!-- <uni-list-item :show-arrow="false" :show-switch="true" :switch-checked="enableRotate" title="是否支持旋转" @switchChange="changeEnableRotate" /> -->  
            <!-- <uni-list-item :show-arrow="false" :show-switch="true" :switch-checked="enableSatellite" title="是否开启卫星图" @switchChange="changeEnableSatellite" /> -->  
            <!-- <uni-list-item :show-arrow="false" :show-switch="true" :switch-checked="enableTraffic" title="是否开启实时路况" @switchChange="changeEnableTraffic" /> -->  
        </uni-list>  
        <view :show-arrow="true" title="是否" @click="setCircle(0,'showCircle1')" >展示圆1</view>  
        <view :show-arrow="true" title="是否展示圆2" @click="setCircle(1,'showCircle2')" >展示圆2</view>  

    </view>  
</template>  
<script>  
    const testMarkers = [{  
            id: 0,  
            latitude: 39.989631,  
            longitude: 116.481018,  
            title: '方恒国际 阜通东大街6号',  
            zIndex: '1',  
            rotate: 0,  
            width: 20,  
            height: 20,  
            anchor: {  
                x: 0.5,  
                y: 1  
            },  
            callout: {  
                content: '方恒国际 阜通东大街6号',  
                color: '#00BFFF',  
                fontSize: 10,  
                borderRadius: 4,  
                borderWidth: 1,  
                borderColor: '#333300',  
                bgColor: '#CCFF99',  
                padding: '5',  
                display: 'ALWAYS'  
            }  
        },  
        {  
            id: 1,  
            latitude: 39.9086920000,  
            longitude: 116.3974770000,  
            title: '天安门',  
            zIndex: '1',  
            iconPath: '/static/location.png',  
            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'  
            }  
        }  
    ];  
    const testPolyline = [{  
            points: [{  
                    latitude: 39.925539,  
                    longitude: 116.279037  
                },  
                {  
                    latitude: 39.925539,  
                    longitude: 116.520285  
                }  
            ],  
            color: '#FFCCFF',  
            width: 7,  
            dottedLine: true,  
            arrowLine: true,  
            borderColor: '#000000',  
            borderWidth: 2  
        },  
        {  
            points: [{  
                    latitude: 39.938698,  
                    longitude: 116.275177  
                },  
                {  
                    latitude: 39.966069,  
                    longitude: 116.289253  
                },  
                {  
                    latitude: 39.944226,  
                    longitude: 116.306076  
                },  
                {  
                    latitude: 39.966069,  
                    longitude: 116.322899  
                },  
                {  
                    latitude: 39.938698,  
                    longitude: 116.336975  
                }  
            ],  
            color: '#CCFFFF',  
            width: 5,  
            dottedLine: true,  
            arrowLine: true,  
            borderColor: '#CC0000',  
            borderWidth: 3  
        }  
    ];  
    const testPolygons = [{  
            points: [{  
                    latitude: 39.781892,  
                    longitude: 116.293413  
                },  
                {  
                    latitude: 39.787600,  
                    longitude: 116.391842  
                },  
                {  
                    latitude: 39.733187,  
                    longitude: 116.417932  
                },  
                {  
                    latitude: 39.704653,  
                    longitude: 116.338255  
                }  
            ],  
            fillColor: '#FFCCFF',  
            strokeWidth: 3,  
            strokeColor: '#CC99CC',  
            zIndex: 11  
        },  
        {  
            points: [{  
                    latitude: 39.887600,  
                    longitude: 116.518932  
                },  
                {  
                    latitude: 39.781892,  
                    longitude: 116.518932  
                },  
                {  
                    latitude: 39.781892,  
                    longitude: 116.428932  
                },  
                {  
                    latitude: 39.887600,  
                    longitude: 116.428932  
                }  
            ],  
            fillColor: '#CCFFFF',  
            strokeWidth: 5,  
            strokeColor: '#CC0000',  
            zIndex: 3  
        }  
    ];  
    const testCircles = [{  
            latitude: 39.996441,  
            longitude: 116.411146,  
            radius: 2000,  
            strokeWidth: 5,  
            color: '#CCFFFF',  
            fillColor: 'rgba(235,10,30,0.13)'  

        },  
        {  
            latitude: 40.096441,  
            longitude: 116.511146,  
            radius: 2000,  
            strokeWidth: 3,  
            color: '#CCFFFF',  
            fillColor: 'rgba(235,10,30,0.13)'  
        },  
        {  
            latitude: 39.896441,  
            longitude: 116.311146,  
            radius: 2000,  
            strokeWidth: 1,  
            color: '#CCFFFF',  
            fillColor: '#CC0000'  
        }  
    ];  
    const testIncludePoints = [{  
            latitude: 39.989631,  
            longitude: 116.481018,  
        },  
        {  
            latitude: 39.9086920000,  
            longitude: 116.3974770000,  
        }  
    ];  
    export default {  
        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: true,  
                scale: 12,  
                showCompass: true,  
                enable3D: true,  
                enableOverlooking: true,  
                enableZoom: true,  
                enableScroll: true,  
                enableRotate: true,  
                enableSatellite: false,  
                enableTraffic: false,  
                showCircle1:false,  
                showCircle2:false,  
                polyline: [],  
                markers: [],  
                polygons: [],  
                circles:[],  
                includePoints: [],  
                rotate: 0,  
                skew: 0  
            }  
        },  
        onLoad() {  
        },  
        methods: {  
            setCircle(index,key){  
                console.log('setCircle',index)  
                this[key] = !this[key];  
                const item = testCircles[index];  
                this.circles = [item];  
                console.log('this.$refs.map1',this.$refs.map1)  
                this.$refs.map1?.moveToLocation({  
                    longitude:item.longitude,  
                    latitude:item.latitude  
                })  
            },  
            changeScale() {  
                this.scale = this.scale == 9 ? 15 : 9;  
            },  
            changeRotate() {  
                this.rotate = this.rotate == 90 ? 0 : 90;  
            },  
            changeSkew() {  
                this.skew = this.skew == 30 ? 0 : 30;  
            },  
            enableThreeD(e) {  
                this.enable3D = e.value;  
            },  
            changeShowCompass(e) {  
                this.showCompass = e.value;  
            },  
            changeEnableOverlooking(e) {  
                this.enableOverlooking = e.value;  
            },  
            changeEnableZoom(e) {  
                this.enableZoom = e.value;  
            },  
            changeEnableScroll(e) {  
                this.enableScroll = e.value;  
            },  
            changeEnableRotate(e) {  
                this.enableRotate = e.value;  
            },  
            changeEnableSatellite(e) {  
                this.enableSatellite = e.value;  
            },  
            changeEnableTraffic(e) {  
                this.enableTraffic = e.value;  
            }  
        }  
    }  
</script>  

<style>  
    .content {  
        flex: 1;  
    }  

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

    .line {  
        height: 4px;  
    }  

    .scrollview {  
        flex: 1;  
    }  
</style>

预期结果:

circle更新之后,圆也只展示当前配置的

实际结果:

之前的圆没有清除还在原地,然后新配置的圆也展示了

bug描述:

nvue使用Google地图,更新circles之后,先前打的circles依然存在未清除掉。可以用hbuilder的创建的hello uni-app模版复现

2024-06-02 16:40 负责人:DCloud_iOS_XHY 分享
已邀请:
Suty

Suty

@DCloud_HB_WJ @DCloud_Android_MHF @DCloud_iOS_LZY 这个bug请快修复

Suty

Suty

@zhengyu 最后你怎么处理业务的呢?

  • zhengyu (作者)

    现在就是处理不了业务啊

    2024-06-27 11:43

Suty

Suty

需要填写谷歌key, 代码案例能够复现bug、

要回复问题请先登录注册