evgajukov
@evgajukov
Java разработчик

Как отобразить Яндекс карту в компоненте vue?

При установке карты на сайте, написанном на vue отображается весь интерфейс карты (кнопки, масштабирование и так далее), а вот самой карты нет. Второй день бьюсь и не могу понять причину.
Посмотреть можно, например, тут https://yapacar.com/carservices/view/201 либо на картинке ниже

5d997739453d5421984041.png

Как описано в документации указал ссылку на api в head файла index.html, а после в нужном мне компоненте указываю:
<div id="map" style="width: 100%; height: 400px"></div>

а после в методе created вставляю код:
ymaps.ready(function () {
    new ymaps.Map("map", {
        center: [55.76, 37.64],
        zoom: 7
    });
});

пробовал и через nextTick с таким же результатом.

При этом если я этот код вставляю в обычный статичный html файл, то все отлично показывается.

Еще пробовал использовать компонент vue-yandex-map, но он у меня вообще не отобразился, просто пустое место показывает.

Помогите разобраться что я делаю не так.
  • Вопрос задан
  • 7572 просмотра
Решения вопроса 1
0xD34F
@0xD34F Куратор тега Яндекс.Карты
Проблема из-за css. Для всех canvas'ов у вас задано правило width: 100% !important;, а родительский элемент canvas'а карты имеет нулевые размеры.

UPD.

new ymaps.Map("map", {

Вот так делать не надо. Что если экземпляров компонента с картой будет больше одного? - двух, трёх и т.д. карт с одним id быть не может. Замените id на ref, и передавайте в конструктор карты вместо id сам элемент.
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
alexbuki
@alexbuki
программист js
Вам правильно написали про стили. Подключите их в main js например
Еще как вариант попробуйте библиотеку:
https://vue-yandex-maps.github.io/
Ответ написан
@letres
1. Выкачиваем модуль c https://api-maps.yandex.ru/2.1/?apikey=Ваш_ключ&la...
2. Выкаченный фал переименовываем в yandex-maps.js и копируем в папку проекта plugins
3. Создаём файл Contacts.vue
<template>
  <div id="map" class="shadow" style="width: 100%; height: 500px"></div>
</template>

<script>
import "../plugins/yandex-maps.js";

function init() {
 var myMap = new ymaps.Map("map", {
                center: [55.76, 37.64],
                zoom: 7
            });
}

export default {
  data() {
    return {};
  },
  mounted() {
    ymaps.ready(init);
  },
};
</script>

<style scoped>
</style>
Ответ написан
Комментировать
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы