kdes70
1/15/2017 - 8:40 AM

YandexMap wrapper for VueJS 2

YandexMap wrapper for VueJS 2

<template>
    <div class="col-xs-12" style="padding:0;">
        <div class="panel panel-default" style="margin:0;">
            <div class="panel-body" style="padding:0;">
                <div v-if="maps.length" :style="{height: height + 'px'}" id="map"></div>
                <h3 v-else class="text-center">Нет точек</h3>
            </div>
        </div>
    </div>
</template>
<style>

</style>
<script>
    export default{
        props: {
            maps: {
                type: Array
            },
            height: {
                type: [String, Number],
                default: 323
            }
        },
        computed: {
            lang () {
                if (typeof this.$route.params.lang === 'undefined') {
                    return 'ru'
                }
                return this.$route.params.lang
            },
            langMap () {
                return this.lang == 'ru' ? 'ru_RU' : 'en_US'
            }
        },
        head() {
            return {
                script: [
                    {src: 'http://api-maps.yandex.ru/2.1/?lang=' + this.langMap},
                ]
            }
        },
        mounted () {
            ymaps.ready(() => {
                if (this.maps.length) {
                    this.item_map_init()
                }
            })
        },
        methods: {
            item_map_init () {

                var myMap = new ymaps.Map("map", {
                    center: [55.76, 37.64],
                    zoom: 2
                })

                // Создаем геообъект с типом геометрии "Точка".

                $.each(this.maps, (key, res) => {
                    myMap.geoObjects.add(new ymaps.Placemark([res.lat, res.lon], {

                        balloonContentHeader: 'Хэдэр',
                        balloonContentBody: 'Тело'
                    }, {
                        // Опции
                        preset: 'twirl#nightStretchyIcon' // иконка растягивается под контент
                    }));
                });

                myMap.setBounds(myMap.geoObjects.getBounds())
            }
        },
        components: {}
    }
</script>