yandex-maps-unofficial / vue-yandex-map

Yandex Maps Component for VueJS
MIT License
359 stars 103 forks source link

Attribute icon for custom marker (YandexMarker) does not work in Nuxt 3 #490

Open G1msky opened 4 months ago

G1msky commented 4 months ago

When the icon attribute is set, the standard blue marker is still visible.

"dependencies": {
    "@nuxt/eslint": "^0.3.10",
    "@nuxtjs/tailwindcss": "^6.12.0",
    "@pinia/nuxt": "^0.5.1",
    "nuxt": "^3.11.2",
    "nuxt-swiper": "latest",
    "pinia": "^2.1.7",
    "primevue": "^3.51.0",
    "vue": "^3.4.21",
    "vue-router": "^4.3.0",
    "vue-yandex-maps": "^1.1.0"
  },
<template>
       <client-only>
                  <YandexMap
                      :coordinates="coordinates"
                      :detailed-controls="detailedControls"
                      :controls="controls"
                      :zoom="16"
                      map-type="map"
                  >
                      <YandexMarker :coordinates="coordinates" :icon="markerIcon" />
                  </YandexMap>
         </client-only>
</template>
<script setup>
import imageMarker from '/ico-map-marker.svg';
const coordinates = [55.737722, 37.206907];
const controls = ['fullscreenControl'];
const detailedControls = { zoomControl: { position: { right: 10, top: 50 } } };

const markerIcon = {
    layout: 'default#image',
    imageHref: imageMarker,
    imageSize: [43, 43],
    imageOffset: [0, 0],
    contentOffset: [0, 15],
};
</script>

Remarks

How I can set my custom image to marker?

neko2h commented 3 months ago

@G1msky Hey mate. It works. put your images in /public. And heere is a small example how i use it.

<YandexMap
      v-if="points"
      :coordinates="[centralPoints.latitude, centralPoints.longitude]"
      map-type="map"
      :controls="controls"
      @created="onInit"
    >
      <YandexMarker
        v-for="point in points"
        :key="point.guid"
        :coordinates="[point.geoposition.latitude, point.geoposition.longitude]"
        :marker-id="point.id"
        :events="['click', 'optionschange']"
        :options="{
          iconLayout: 'default#image',
          iconImageHref: '/svgs/point_styler.svg',
          iconImageSize: [64, 64],
        }"
        @click="onClick"
      />
 </YandexMap>