vue-yandex-map

install

npm i vue-yandex-map

use

<yandex-map
    :center="[55.681576, 37.488467]"
    :zoom="10"
    :dragable="false"
    :scrollZoom="false"
    @created="mapCreated">
    @destroy="mapDestroy">
        <region-select
          button-text="Please select ..."
          :region="[[55.761104221485205, 37.589244608215324],[55.753360214866454, 37.519893411926276], [55.74329069752624, 37.57207847052001]]"
          @changed="regionChanged">
        </region-select>
</yandex-map>

example app

 
import YandexMap from 'vue-yandex-map'
Vue.use(YandexMap, {
    version: '2.1',
    lang: 'ru_RU',
    apiKey: '',
});
 
export default {
      name: 'app',
      data () {
        return {
          map: null,
          map_data: [],
          mapObjectManager: null
        }
      },
      methods: {
        yamapReady: function () {
 
        },
        mapCreated: function ($map) {
          console.info('mapCreated, $map=', $map)
 
          this.map = $map
          this.mapObjectManager = new ymaps.ObjectManager({
            clusterize: false,
            gridSize: 60,
            clusterMinClusterSize: 5,
            clusterHasBalloon: true, // Опции кластеров задаются с префиксом cluster.
            geoObjectOpenBalloonOnClick: false // Опции геообъектов задаются с префиксом geoObject
          })
 
          this.map.behaviors.disable('drag')
 
          // set ObjectManager events
          this.map.events.add(['click'], function(){
            this.mapObjectManager.objects.balloon.close()
          })
 
          // add points on map
          // ...
        },
        mapDestroy: function($map) {
          console.info('mapDestroy')
        },
        regionChanged: function ($coordinates, $polygon) {
 
          console.info('regionChanged, coord=', $coordinates)
 
          let visibleID = [];
 
          if (typeof $polygon === 'undefined') {
            $polygon = null;
          }
 
          this.map.behaviors.disable('drag');
 
          // check points in region
          this.mapObjectManager.setFilter(function (object) {
 
            let in_poligon = $polygon === null ? false : $polygon.geometry.contains(object.geometry.coordinates);
            let visible = $polygon === null ? true :  in_poligon;
 
            if($polygon !== null && in_poligon) {
              visibleID.push(object.id)
            }
 
            return visible
          })
 
          console.log('map, selected point ID', visibleID)
        }
      }
    }

screenshot

yandex-map properties

Name	Type	Required	Default	Description
center	Array	false	[]	set map center
zoom	Number	false	15	set map zoom
dragable	Boolean	false	true	enable drag map
scrollZoom	Boolean	false	true	enable zoom on scroll

yandex-map events

Name	params	Description
created	map	when creating the map
destroy	map	when destroy the map
click	map, position	when click on map
boundschange	map, bounds	when change bounds

region-select properties

Name	Type	Required	Default	Description
button-text	String	false		set button text
button-selected-text	String	false		set button selected text
button-cancel-text	String	false		set button cancel text
region	Array	false	[]	set region

region-select events

Name	params	Description
changed	coordinates	when changing the selection
status	status	when changing the selection status [init, selected, cancel]

https://domatskiy.github.io/vue-yandex-map/