当用户放大地图上的某个区域时，显示来自不同功能的特定数据

Posted 2023-02-22

【中文标题】当用户放大地图上的某个区域时，显示来自不同功能的特定数据

【英文标题】：when user get zoomed in some area on map, display specific data from different function

【发布时间】：2019-07-06 21:15:53

【问题描述】：

当用户靠近地图上的某个区域时，显示来自其他功能的特定数据？我正在计算函数中计算每个区域房地产价格的平均值。它在下面。你可以在jsfiddle上看到平均函数...

已经显示平均值，但是，我需要在这里做的是，当用户放大该区域/城市然后显示该区域平均值...下面带有地图的原始代码...

例如，如何设置边界并将这些边界连接到平均函数？？？感谢您的帮助。！

代码更新了！

data() 
        return 
            avg:"",
            map: ,
            mapName: "map",
            estates: [],
    ,
    mounted() 
        axios.get('/ajax').then((response) => 
            this.estates =  response.data
        );

        this.initMap();

    ,
    methods: 

       initMap: function()
            var mapOptions =
                
                    zoom : 6,
                    center : 
                        lat:34.652500,
                        lng:135.506302
                    
                ;

            this.map = new google.maps.Map(document.getElementById(this.mapName), mapOptions);

            google.maps.event.addListener(this.map, 'bounds_changed', function() 
                console.log("bound changed alert");
            );
        ,


        avgArray: function (region) 
             const sum = arr => arr.reduce((a,c) => (a += c),0);
             const avg = arr => sum(arr) / arr.length;

             return avg(region);
        ,


    ,
    computed: 
 
        groupedPricesByRegion () 
        	return this.estates.reduce((acc, obj) => 
            var key = obj.region;

            if (!acc[key]) 
              acc[key] = [];
            

                acc[key].push(obj.m2_price);

                return acc;
            , );
        ,

        averagesByRegion () 
        	let arr = [];
            Object.entries(this.groupedPricesByRegion)
                .forEach(([key, value]) => 
                    arr.push( [key]: Math.round(this.avgArray(value)) );
            );

            return arr;
        ,
    ,

【参考方案1】：

我认为这不是 vue 特有的，更多的是关于 google-maps。

可以在地图对象上监听bounds_changed事件：bounds_changed

然后获取当前视图的边界

看看this excellent answer 应该可以帮到你。

如果您使用的是 vuejs，请查看此库 vue-google-maps，它应该可以帮助您。

P.S 确保消除您在 bounds_changed 上调用的函数，否则您可能会对生成平均值函数进行大量不必要的调用