vue-yandex-maps

<template>

<div >


                        <input name="f_addr" :value="addrMy" >

                        <div id="mapid" class="map-col">
                            <yandex-map
                              @click="onClick"
                            :coords="coordsMy"
                            zoom=15
                            :controls="controls"
                            :options="options"

                        >
                                    <ymap-marker
                                    marker-type="placemark"
                                    marker-id="my"
                                    :coords="coordsMy"
                                    />
                        </yandex-map>


                        </div>

                    </div>
</template>
<script>
import { loadYmap } from 'vue-yandex-maps';
export default {
    props: {
      coords:Array,
      id:Number,
      addr:String
      },
    components:{
     loadYmap
    },
 data() {
      return {


     controls:["zoomControl"],
     options:{
       suppressMapOpenBlock: true,
         yandexMapDisablePoiInteractivity:true
       },
     addrMy:null,
     noResults:false,
     focused:false,
     coordsMy:[1,1],
     mapShow:false,
  }
 },
   async fetch() {
     if(this.coords.length===0){
       let geo=await this.$store.getters['getAuthGeo'];
       if(geo.geo_lat){
         this.coordsMy=[geo.geo_lat, geo.geo_lng];
       }else{
         this.coordsMy=[55.753595,37.621031];
       }
     }
    },
    created () {
      this.addrMy=this.addr
      this.setMarker(this.coords);
    },
     async mounted(){
        if(process.client){
          let self=this;

            let ymapsettings= {
                       lang:this.$i18n.locale,
                        apiKey: process.env.YAMAP_KEY,
                         version: '2.1'
                         };

                  loadYmap({...ymapsettings}).then(function () {
                            window. console.log('ymaps load ' );
                            let suggestView = new ymaps.SuggestView('f_addr');
                            suggestView.events.add('select', function (event) {
                                self.addrMy=(event.get('item').value);
                                 window.ymaps.geocode(
                                            self.addrMy
                                        ).then((obj) =>
                                        self.coordsMy=(obj.geoObjects.get(0).geometry.getCoordinates())
                                        );
                            });
                    },
                    function (e) {
                        window. console.error('ymaps return error: ' + e);
                        self.coordsMy=[];
                  });
            //}

        }
     },
   methods: {
          setAddr:function(addr){
                this.addrMy=addr;
          },
          setMarker:function(coords){
                this.coordsMy=coords;
                this.mapShow=true;
                /* eventBus.$emit('changeGeo',  {
                                                'id':this.id,
                                                'coords':coords,
                                                'addr':this.addrMy
                                                }) ;*/

          },
           onClick(e) {
             let self=this;
              this.setMarker(e.get('coords'));

               window.ymaps.geocode(
                this.coordsMy
               ).then((obj) =>
               self.geocode(obj)
               );


            },
          geocode:function(obj){
            this.addrMy=obj.geoObjects.get(0).getAddressLine();
          },
          onSubmit:function(result){
               this.addrMy=result;
                 window.ymaps.geocode(
                     result
                  ).then((obj) => this.setMarker(obj.geoObjects.get(0).geometry.getCoordinates()));
          },




  }

}
</script>

 <style scoped>
 .map-col{

 height: 300px;
  overflow: hidden;
 }
.map {
  width: 100%;
  height: 100%;
}

.ymap-container {
  height: 300px;
  width: 100%;
}
 </style>