vue2-google-maps的自定义标记

Question

我试图在vue2-google-maps中为自定义标记添加我自己的图像，但没有成功。我知道这是一个错误，当我在标记中添加：icon =“ {url：'../ assets / my_image'}”时，标记会消失。有没有人设法使其工作？

Answer 1

在这种情况下，您需要加载图像，如下所示：

:icon="{ url: require('../../assets/img/marker-a.png')}"

一个例子：

<GmapMarker
  v-for="(m, index) in markers"
  :key="index"
  :ref="`marker${index}`"
  :position="m.position"
  :clickable="true"
  :draggable="true"
  :icon="{ url: require('../../assets/img/marker-a.png')}" />

Answer 2

以防万一，如果您想缩放自定义标记的大小以在视网膜屏幕上看起来更好：

在 <template>

<GmapMarker
  v-for="(m, index) in markers"
  :key="index"
  :ref="`marker${index}`"
  :position="m.position"
  :clickable="true"
  :draggable="true"
  :icon="markerOptions" />

在 script

const mapMarker = require('~/assets/images/layout/map-marker.png');
data() {
  return {
    markerOptions: {
      url: mapMarker,
      size: {width: 60, height: 90, f: 'px', b: 'px',},
      scaledSize: {width: 30, height: 45, f: 'px', b: 'px',},
    },
  };
},