Как инициализировать карту один раз на Vue, но использовать на разных роутах Vue?

Question

[danilr]

Ситуация такая - подключил 2гис к SPA Vue, вставил ее в компоненту(в компоненте инициализирую в mounted) и использую на разных страницах VueRouter эту компоненту. Все работает, но в консоли выдает ошибку что map уже инициализирована. Как сделать правильно?

Answer 1

[Даниил Братухин]

1) убедитесь, что вы создаёте экземпляр DG.Map со ссылкой на элемент DOM, а не на его ID
2) не забудьте уничтожить созданный экземпляр в beforeDestroy

export default {
  data: () => ({
    map: null
  }),
  mounted () {
    this.map = new DG.map(this.$el)
  },
  beforeDestroy () {
    if (this.map) this.map.remove()
  }
}

Comments

[danilr]

1 пункт можно пояснить, пожалуйста? Почему?
И то есть карта будет инициализирована 2 раза все равно? (Хоть и после удаляется)
Никак нельзя ее один раз инициализировать для всего проекта?

[Даниил Братухин]

Если передать id, то компонент при отрисовке будет искать контейнер для карты не внутри своего узла, а по всему DOM. Если ваш id не уникален для каждого нового экземпляра, то DG может попытаться инициализировать карту второй раз, да ещё и вне компонента – отсюда и ошибки.

Инициализировать один раз можно, но это уже не компонент, а директива. Решение, мягко говоря, не очень элегантное, но выглядеть оно будет как-то так:

Vue.directive('dg-map', (() => {
  let map = null
  return {
    inserted (el) {
      if (map) {
        el.appendChild(map)
      } else {
        map = document.createElement('div')
        el.appendChild(map)
        DG.map(map)
      }
    }
  }
})())

Не факт, что оно заработает, кстати. 2gis может отвалиться, если элемент карты на некоторое время останется без узла-родителя (скажем, при переходе с одной страницы на другую).

[danilr]

Даниил Братухин, пытался сделать через ссылку, так вообще только в одном месте создается карта. И в консоли пишет - contMap.vue?c8fb:47 Uncaught (in promise) TypeError: Cannot read property '$refs' of undefined
at eval (contMap.vue?c8fb:47)

[Даниил Братухин]

danilr, посмотрите пример - у меня всё работает. Ошибка где-то в вашем коде (было бы неплохо на него взглянуть, кстати).

[danilr]

Даниил Братухин,

<div class="contacts-box">
            <p class="contacts-key">Эл. почта:</p>
            <p class="contacts-value">[e-mail] </p>
        </div>

    </div>
    <div class="map-wrapper">
        <div ref="cap" style="width:100%; height:100%"></div>
    </div>
</div>
</template>

<script>
import DG from '2gis-maps'
// var DG = require('2gis-maps')
export default {
    data(){
        return{
            map: null
        }
    },
    mounted(){
        DG.then(function () {
            this.map = DG.map(this.$refs.cap, {
                center: [54.966613, 73.439596],
                zoom: 13,
                // zoomControl: false,
                minZoom: 10,
                fullscreenControl: false,
                scrollWheelZoom: false
            });
            var myDivIcon = DG.divIcon({
                iconSize: [57, 77],
                className: "marker-custom",
                iconAnchor: [28.5, 70],
                html: '<img class="marker-img" src="img/marker.svg">'

            });
            DG.marker([54.966613, 73.439596], {
                icon: myDivIcon
            }).addTo(this.map);
            // DG.control.zoom({position: 'bottomleft'}).addTo(map);
        });
    },
  beforeDestroy () {
    if (this.map) this.map.remove()
  }
}
</script>

У меня компонент не только карта, поэтомы на весь компонент не могу сделать (this.$el)

[Даниил Братухин]

danilr, в вашем случае не нужно оборачивать инициализацию в DG.then() (см. документацию). Плюс this внутри функции undefined, но это уже не так важно.

[danilr]

Даниил Братухин, Друг, помоги разобраться пожалуйста)
Я убрал обертку DG.then, теперь работает на всех роутах, но опять ошибка такая
script.full.js?194a:15 Uncaught (in promise) Error: Map container not found.

У меня такое ощущение, что скрипт 2гиса ищет сам контейнер с id map, как исправить?