Начал делать тепловую карту, по доке, то что надо было получилось. Вопрос как это переделать на 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&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 теперь доступен, но у меня ничего не отображается.
В чем проблема?