Vuejs + Google Maps> document.getElementById и this.refs возвращают ноль для div

Question

Я пытаюсь добавить Google Maps в мое приложение vuejs, следуя этому руководству здесь: https://markus.oberlehner.net/blog/using-the-google-maps-api-with-vue/

У меня есть div с id = "maps", а также ref = "mapsection". Я попытался связать экземпляр карты с помощью div как document.getElementById, так и this.ref, но получаю ошибку null / undefined. Может кто-нибудь посоветовать, пожалуйста, что я делаю не так? Я вижу созданный div, когда я иду, чтобы проверить режим.

Я пробовал оба из следующих пунктов, где «mapsection» - это ссылка, а «map» - идентификатор для div.

const map = new google.maps.Map(this.refs.mapsection);

const map = new google.maps.Map(document.getElementById('map'));

Просмотр кода:

      <el-row>
        <div ref="mapsection" id="map" style="width:100%;height:400px">

        </div>
      </el-row>

Код сценария:

 async mounted() {
      try {

        console.log(document.getElementById('map')); //returns null

        const google = await gmapsInit();
        const geocoder = new google.maps.Geocoder();
        const map = new google.maps.Map(document.getElementById('map')); //tried this.refs.mapsection as well.
        const locations = [{
                              position: {
                                lat: 48.160910,
                                lng: 16.383330
                              }
                            }]

        geocoder.geocode({ address: 'Austria' }, (results, status) => {
          if (status !== 'OK' || !results[0]) {
            throw new Error(status);
          }

          map.setCenter(results[0].geometry.location);
          map.fitBounds(results[0].geometry.viewport);
          const markers = locations.map(x => new google.maps.Marker({ ...x, map }));
        });
      } catch (error) {
        console.error(error);
      }
    }

Получаемые ошибки:

1. с this.refs.mapsection> TypeError: Cannot read property 'mapsection' of undefined

2. с document.getElementById('maps')> TypeError: Cannot read property 'firstChild' of null

Answer 1

В указанном руководстве не используется el-row. Ваша проблема не имеет ничего общего с Google Maps.

Для отладки попробуйте один из этих подходов.

1. поместите все mounted вasync $nextTick для обеспечения рендеринга.

2. переместите свой код из el-row, el-table и т. д. и в div, чтобы изолировать проблему.

3. refs в циклах часто является array, поэтому, когда вы, наконец, получите эту работу, стоит подумать.