vue2-google-maps размер маркера и использование объекта Google для изменения размера не работают

Question

Я использую vue2-google-maps , и я пытаюсь изменить размер маркера-значка и использую объект Google для изменения размера, но не работаю, когда я обновляю страницу.

Вот проблема:

Первая попытка после сохранения Работает нормально!

После обновления страницы Не работает

Я пытаюсь эмулировать пример использования объекта Google с веб-сайта vue2-google-maps.

HTML / Vue

<template>
 <v-content  class="background-light">
   <v-layout row wrap>
    <v-flex xs12 class="mb-4">
     <GmapMap
      :center="{lat: 19.636226, lng: 42.806212}"
      :zoom="5"
      map-type-id="terrain"
      style="width: 500px; height: 300px"
    >
      <GmapMarker
        :key="index"
        v-for="(m, index) in markers"
        :position="m.position"
        :clickable="true"
        :draggable="true"
        @click="center=m.position"
        :icon="m.icon"
        :label="m.label"
      />
      </GmapMap>
    </v-flex>
   </v-layout>
  </v-container>
 </v-content>
</template>

Это скрипт

<script>
import {gmapApi} from 'vue2-google-maps'
export default {
 data: () => ({
  markers: [],
 }),
 created () {
  this.initialize()
 },
 computed: {
  google: gmapApi
 },
 methods: {
  initialize () {
   this.markers = [
     {
      position:
        {
          lat: 19.636226,
          lng: 42.806212
        },
      icon: {
        url: 'https://image.flaticon.com/teams/slug/google.jpg',
        scaledSize:  this.google && new google.maps.Size(28, 28),
        labelOrigin: this.google && new google.maps.Point(16,-10),
        },
      title: 'title',
      label: {
        text: 'label',
        color: "black",
        fontWeight: "bold",
        fontSize: "12px"
      }
    }, 
    {
      position:
      {
        lat: 18.445320,
        lng: 47.989452
      },
      icon: {
        url: 'https://image.flaticon.com/teams/slug/google.jpg',
        scaledSize: this.google && new google.maps.Size(28, 28),
        labelOrigin: this.google && new google.maps.Point(16,-10),
        },
      title: 'title',
      label: {
        text: 'label',
        color: "black",
        fontWeight: "bold",
        fontSize: "12px"
      }
    },
    {
      position:
      {
        lat: 19.128580,
        lng: 47.698405
      },
       icon: {
        url: 'https://image.flaticon.com/teams/slug/google.jpg',
        scaledSize: this.google && new google.maps.Size(28, 28),
        labelOrigin: this.google && new google.maps.Point(16,-10),
        },
      title: 'title',
      label: {
        text: 'label',
        color: "black",
        fontWeight: "bold",
        fontSize: "12px"
      }
    },
    {
      position:
        {
          lat: 19.881369,
          lng: 43.367863
        },
      icon: {
        url: 'https://image.flaticon.com/teams/slug/google.jpg',
        scaledSize: this.google && new google.maps.Size(28, 28),
        labelOrigin: this.google && new google.maps.Point(16,-10),
        },
      title: 'title',
      label: {
        text: 'label',
        color: "black",
        fontWeight: "bold",
        fontSize: "12px"
      }
     }, 
    ]
   },
  },
 }
</script>

Answer 1

Скорее всего, это происходит, поскольку к моменту инициализации значка маркера API Карт Google еще не загружен , что приводит к сбою инициализации значка для следующих свойств:

icon: {
    scaledSize:  this.google && new google.maps.Size(28, 28),
    labelOrigin: this.google && new google.maps.Point(16,-10),
}

Вы можете рассмотреть следующие варианты, чтобы обойти эту проблему:

Вариант 1

Использование $gmapApiPromiseLazy mixin из vue-google-maps, чтобы гарантировать загрузку API Карт Google, например:this:

created() {
   this.$gmapApiPromiseLazy().then(() => {
      this.initialize();  //init once  library has been loaded
   });
},

Опция 2

инициализация icon свойств с помощью литералов объектов вместо специфичных для API Google объектов, таких как:

icon: {
    url: "https://image.flaticon.com/teams/slug/google.jpg",
    scaledSize: {width: 28, height: 28},
    labelOrigin: {x: 16, y: -10}
},