При загрузке карты Gaode в диалоговом окне Element UI я обнаружил, что карта, завернутая в компонент диалога, не может отображаться, но карта, написанная на обычной странице, не имеет этой проблемы.
Карта отображается нормально на обычной странице
Карта не может отображаться во всплывающем окне Видим тот же код, если он не прописан в диалоге, проблем с отображением нет. Прочитав исходный код элемента ui, я, наконец, нашел причину проблемы: как видите, содержимое диалогового окна обёрнуто этим div, а для отображения или скрытия этого div используется инструкция v-if. Проверьте официальную документацию vue, вы можете понять особенности v-if:
То есть до того, как диалоговое окно не открывается, выполняется метод инициализации карты, который мы написали в функции ловушки, но поскольку состояние привязки v-if равно false, карта не инициализируется успешно, и когда Открываем диалоговое окно, то есть при установке условия рендеринга v-if в true смонтированный метод выполняться не будет, поэтому диалоговое окно устанавливается только с обычным div, который не был отрендерен конструктором Gaode, то, что мы видим, будет просто пустым.
Карта появляется Есть еще один способ загрузить карту
Поместите карту в компонент и введите этот подкомпонент во всплывающем окне, чтобы также загрузить карту.
Также через переменную состояния отображения диалога можно судить о загрузке карты.