Skip to content

Instantly share code, notes, and snippets.

@reg2005
Created January 15, 2017 08:28
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save reg2005/1f1f3645a5311cf957192cfb3c4e0afb to your computer and use it in GitHub Desktop.
Save reg2005/1f1f3645a5311cf957192cfb3c4e0afb to your computer and use it in GitHub Desktop.
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment