Question

我正在使用vue2-google-maps，并且尝试更改标记图标的大小并使用google对象调整大小，但是刷新页面后无法使用。

问题出在这里

我尝试从vue2-google-maps网站模仿使用google对象的示例。

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

最有可能是由于标记图标初始化之前尚未加载Google Maps API ，这导致以下属性的图标初始化失败：

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

您可以考虑以下选项来避免此问题：

选项1

利用$gmapApiPromiseLazy中的vue-google-maps混合来确保已加载Google Maps API，如下所示：

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

选项2

通过对象文字（而不是像这样的Google API特定对象）

初始化icon属性：

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

vue2-google-maps标记图标的大小以及使用google对象调整大小均无效

1 个答案: