когда пользователь масштабируется в некоторой области на карте, отображать конкретные данные из другой функции

Question

когда пользователь приблизится к некоторой области на карте, отобразить конкретные данные из одной другой функции?Я вычисляю средние цены каждой области недвижимости в вычисленных функциях.это ниже.Вы можете увидеть среднюю функцию на 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;
        },
    },

Answer 1

Я не думаю, что это характерно для vue, это больше касается google-maps.

Вы можете прослушать событие bounds_changed на объекте карты: bounds_changed

А затем получите границы вашего текущего представления

Посмотрите на этот превосходный ответ , который должен вам помочь.

Если вы используете vuejs,Вы посмотрите на эту библиотеку vue-google-maps , которая должна вам помочь.

PS Обязательно отмените функцию, которую вы вызываете на bounds_changed, или вы можете сделать много ненужноговызовы вашей функции генерации средних