@Ivan_Dobrov

HeatMap Yandex, как переделать под vue 3 (vue-yandex-maps)?

Начал делать тепловую карту, по доке, то что надо было получилось. Вопрос как это переделать на vue3 с помощью их библиотеки vue-yandex-maps.
То что у меня сейчас:
<!DOCTYPE html>
<html>
<head>
    <title>Тепловая карта</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU&amp;apikey=72efc82b-9ef7-4177-85f2-2337c7f6571d" type="text/javascript"></script>
    <script src="map.js" type="text/javascript"></script>
    <script src="https://yastatic.net/s3/mapsapi-jslibs/heatmap/0.0.1/heatmap.min.js" type="text/javascript"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

    <style>
        html, body, #map {
            width: 100%;
            height: 100%;
            padding: 0;
            margin: 0;
        }
    </style>
</head>
<body>
<div id="map"></div>
</body>
</html>


ymaps.ready(['Heatmap']).then(async function init() {

    let myMap = new ymaps.Map('map', {
        center: [55.733835, 37.588227],
        zoom: 11,
        controls: []
    });

    let getUserData = async () => {
        try {
            const {data} = await axios.get(URL)
            let obj = data
            let result = []
            for (let i = 0; i < obj.length; i++) {
                result.push({type: 'Feature', geometry: {type: 'Point', coordinates: [parseFloat(obj[i].latitude),
                            parseFloat(obj[i].longitude)]}, properties: {weight: obj[i].weight}})
            }
            return result;
        } catch (err) {
            console.log(err.message);
        }
    };
    let data = await getUserData()

    let heatmap = new ymaps.Heatmap(data, {
        // Радиус влияния.
        radius: 15,
        // Нужно ли уменьшать пиксельный размер точек при уменьшении зума. False - не нужно.
        dissipating: false,
        // Прозрачность тепловой карты.
        opacity: 0.8,
        // Прозрачность у медианной по весу точки.
        intensityOfMidpoint: 0.2,
        // JSON описание градиента.
        gradient: {
            0.1: 'rgba(128, 255, 0, 0.7)',
            0.2: 'rgba(255, 255, 0, 0.8)',
            0.7: 'rgba(234, 72, 58, 0.9)',
            1.0: 'rgba(162, 36, 25, 1)'
        },
    });
    console.log(heatmap)
    heatmap.setMap(myMap);
});


import { loadYmap } from 'vue-yandex-maps';

export default {
  async mounted() {
    const settings = { lang: 'en_US' };
    await loadYmap(settings);
    console.log(ymaps); // здесь доступен весь функционал ymaps
  },
};

подставляю все, что выше, раз ymaps теперь доступен, но у меня ничего не отображается.
В чем проблема?
  • Вопрос задан
  • 300 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы