1***@qq.com
1***@qq.com
  • 发布:2022-09-15 09:31
  • 更新:2022-09-15 09:31
  • 阅读:297

map根据不同的缩放比例显示不同的数据,在微信开发工具是可以切换到城市的,但是在真机上面就不行

分类:uni-app
       <map id="map" class="map" :scale="4" @regionchange="regionchange" :show-location="true"  :latitude="latitude"   
            :longitude="longitude" >  
</map>  

// 缩放 || 移动
async regionchange(e) {

            // 获取缩放等级  
            if(!e) return  

            if(e.type == 'end'){  
                let map = uni.createMapContext('map');  
                console.log(e)  
                 map.getScale({  
                    success: (res) => {  
                        this.scale = res.scale  
                        this.getZoom(res.scale)  

                    },  
                    fail: (data, code) => {  
                        console.log('fail');  
                    }  
                })  
            }  

        },  

     // 根据不同的缩放比例显示不同的数据  
        async getZoom(zoom){  
            if (zoom <= 7) { // 省  
                this.provinceZoom()  

            } else if (zoom <= 9) {  // 市  
                this.cityZoom()  

            } else if (zoom <= 12) {  // 区  

            } else if (zoom <= 14) { // 打点  

            }  

        },  
        // 城市  
        cityZoom(){  

            this.city_position = this.city_map_data.map((item, index) => {  
                return {  
                    longitude: Number(item.center[0]),  
                    latitude: Number(item.center[1]),  
                    city_name: item.city_name,  
                    total: item.total,  
                    warn_list: item.warn_list,  
                    id: index + 1,  
                    label: {  
                        padding: 4,  
                        bgColor: '#3a7eff',  
                        color: '#ffffff',  
                        content: item.city_name + '\n' + item.total  
                    }  
                }  
            })  
            const markers = []  
            this.city_position.forEach((item, index) => {  
                const newMarker = Object.assign({}, ...this.marker, item)  
                markers.push(newMarker)  
            })  
            console.log(markers)  
            this._mapContext.addMarkers({  
                markers,  
                clear: false,  
                complete(res) {  
                    console.log('addMarkers', res)  
                }  
            })  
        },  
        // 省份  
        provinceZoom(){  
            this.province_position = this.province_map_data.map((item, index) => {  
                return {  
                    longitude: Number(item.center[0]),  
                    latitude: Number(item.center[1]),  
                    province_name: item.province_name,  
                    total: item.total,  
                    warn_list: item.warn_list,  
                    id: index + 1,  
                    label: {  
                        padding: 4,  
                        bgColor: '#3a7eff',  
                        color: '#ffffff',  
                        content: item.province_name + '\n' + item.total  
                    }  
                }  
            })  
            const markers = []  
            this.province_position.forEach((item, index) => {  
                const newMarker = Object.assign({}, ...this.marker, item)  
                markers.push(newMarker)  
            })  
            this.addMarkers(markers)  
        },  

                   addMarkers(markers) {  
            this._mapContext.addMarkers({  
                markers,  
                clear: false,  
                complete(res) {  
                    console.log('addMarkers', res)  
                }  
            })  
        },
2022-09-15 09:31 负责人:无 分享
已邀请:

该问题目前已经被锁定, 无法添加新回复