Closed AndreyArtamonov closed 2 years ago
Возникла ситуация, я не совсем понимаю, как правильно рендерить метки в большом количестве.
Задача: Я получаю по API пункты выдачи CDEK по Москве (~100-150 координат).
Проблема: Когда я их добавляю и кластеризирую падает сильно fps c 60 до 15-20. Heap size с 20-30mb растет до 80-100mb
Проблема скорее всего в том, что цикл рендерит компонент . Как мне правильно добавлять метки без такой просадки?
templates
<yandex-map :settings="settings" :coords="maps.position" :zoom="maps.zoom"> <ymap-marker :coords="item.coords" :marker-id="item.id" marker-type="placemark" v-for="item in items" :cluster-name="1"></ymap-marker> </yandex-map>
script
import {yandexMap, ymapMarker} from 'vue-yandex-maps' export default { components: {yandexMap, ymapMarker}, data() { return { maps: { position: [55.755814, 37.617635], zoom: 10, settings: { apiKey: '<api_key>', lang: 'ru_RU', version: '2.1' }, clusterOptions: { 1: { gridSize: 64 } } }, items: [] } }, methods: { get_poi() { axios.get('/api/v1/delivery/cdek/widget', { params: { 'region_fias_id': '0c5b2444-70a0-4932-980c-b4dc0d3f02b5', 'city': 'Москва' } }).then((response) => (this.items = response.data)); } }, created() { this.get_poi(); } }
Добрый день! Воспроизведите пример в песочнице, пожалуйста. Или создайте репозиторий с примером
Возникла ситуация, я не совсем понимаю, как правильно рендерить метки в большом количестве.
Задача: Я получаю по API пункты выдачи CDEK по Москве (~100-150 координат).
Проблема: Когда я их добавляю и кластеризирую падает сильно fps c 60 до 15-20. Heap size с 20-30mb растет до 80-100mb
Проблема скорее всего в том, что цикл рендерит компонент. Как мне правильно добавлять метки без такой просадки?
templates
script