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',},
    },
  };
},

vue2-google-maps的自定义标记

2 个答案: