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

Answer 3

:icon="{ url: require('../../../images/icon-maker.png')}"

when i add this i get the error of InvalidValueError: setIcon: in property url: not a string

vue2-google-maps 的自定义标记

custom marker for vue2-google-maps

vue.js

vue2-google-maps