Примеры использования и настройки карты

Перемещение маркера по клику

<template>
  <yandex-map 
    :coords="coords"
    :zoom="10" 
    @click="onClick"
  >
    <ymap-marker 
      :coords="coords" 
      marker-id="123" 
      hint-content="some hint" 
    />
  </yandex-map>
</template>

export default {
  data: () => ({
    coords: [
      54.82896654088406,
      39.831893822753904,
    ],
  }),
  methods: {
    onClick(e) {
      this.coords = e.get('coords');
    },
  },
};

Кастомная иконка

<template>
  <yandex-map :coords="coords">
    <ymap-marker 
      marker-id="123" 
      :coords="coords"
      :icon="markerIcon"
    />
  </yandex-map>
</template>

export default {
  data: () => ({
    coords: [54, 39],
    markerIcon: {
      layout: 'default#imageWithContent',
      imageHref: 'https://image.flaticon.com/icons/png/512/33/33447.png',
      imageSize: [43, 43],
      imageOffset: [0, 0],
      content: '123 v12',
      contentOffset: [0, 15],
      contentLayout: '<div style="background: red; width: 50px; color: #FFFFFF; font-weight: bold;">$[properties.iconContent]</div>'
    }
  })
}

Кастомный темплейт балуна

<template>
  <yandex-map :coords="coords" @click="onClick">
    <ymap-marker 
      marker-id="123" 
      :coords="coords"
      :balloon-template="balloonTemplate"
    />
  </yandex-map>
</template>

export default {
  data: () => ({
    coords: [54, 39],
  }),
  computed: {
    balloonTemplate() {
      return `
        <h1 class="red">Hi, everyone!</h1>
        <p>I am here: ${this.coords}</p>
        <img src="http://via.placeholder.com/350x150">
      `
    }
  },
  methods: {
    onClick(e) {
      this.coords = e.get('coords');
    }
  }  
}

.red {
  color: red;
}

Кастомный балун кластера

<template>
  <yandex-map
    :coords="coords"
    :zoom="zoom"
    :cluster-options="clusterOptions"
  >
    <ymap-marker
      marker-id="1"
      :coords="coords"
      :balloon="{header: 'First'}"
      cluster-name="1"
    />
    <ymap-marker
      marker-id="2"
      :coords="coords"
      :balloon="{header: 'Second'}"
      cluster-name="1"
    />
  </yandex-map>
</template>

export default {
  data: () => ({
    coords: [54, 39],
    zoom: 10,
    clusterOptions: {
      1: {
        clusterDisableClickZoom: true,
        clusterOpenBalloonOnClick: true,
        clusterBalloonLayout: [
          '<ul class=list>',
          '{% for geoObject in properties.geoObjects %}',
          '<li><a href=# class="list_item">{{ geoObject.properties.balloonContentHeader|raw }}</a></li>',
          '{% endfor %}',
          '</ul>',
        ].join(''),
      },
    },
  }),
};

Использование слота балуна в маркере

<template>
  <yandex-map 
    :coords="coords"
    :zoom="10" 
    @click="onClick"
  >
    <ymap-marker 
      :coords="coords" 
      marker-id="123"
      marker-type="placemark"
      @balloonopen="bindListener"
      @balloonclose="unbindListener"
    >
      <my-component slot="balloon"></my-component>
    </ymap-marker>
  </yandex-map>
</template>

Vue.component('my-component', {
  template: '<button id="btn">Click</button>',
});

export default {
  data: () => ({
    coords: [
      54.82896654088406,
      39.831893822753904,
    ],
  }),
  methods: {
    bindListener() {
      document.getElementById('btn').addEventListener('click', this.handler);
    },
    unbindListener() {
      document.getElementById('btn').removeEventListener('click', this.handler);
    },
    handler() {
      alert('Whoo-Ha!');
    },
  },
};

Использование loadYmaps

import { loadYmap } from 'vue-yandex-maps';

export default {
  async mounted() {
    const settings = { lang: 'en_US' };
    await loadYmap(settings);
    console.log(ymaps); // здесь доступен весь функционал ymaps
  },
};