Прошу помочь коллег, пытаюсь создать полигон при нажатии на карту в шаблоне Vue.js, но ни одного примера не смог найти готового. С отрисовкой статичных полигонов проблем нет. В обычном js проблем с этим также не возникает. При попытке подставить примеры с оф сайта Яндекса в функцию onClick2
<template>
<div id="app">
<yandex-map
v-if="polygons.length"
:coords="coords"
:map-type="maptype"
@click="onClick2">
<ymap-marker v-for="(polygon, index) in polygons" :key="index"
:marker-id="polygon.uuid"
:marker-type="polygon.marker.type"
:coords="polygon.marker.coordinates"
:markerFill="{color: polygon.color}"
@click="onClick"
@contextmenu="contextMenu"
></ymap-marker>
</yandex-map>
</div>
</template>
<script>
import { yandexMap, ymapMarker } from 'vue-yandex-maps'
import PolygonService from '../services/PolygonService'
export default {
components: { yandexMap, ymapMarker },
data: () => ({
settings: {
apiKey: '5050011e-f8a4-4b8f-b989-98479f0acb4b',
lang: 'ru_RU',
coordorder: 'latlong',
version: '2.1'
},
coords: [55.82934, 50.47381],
maptype: 'satellite',
polygons: []
}),
async created () {
this.polygons = (await PolygonService.get()).data
},
async mounted () {
console.log(ymapMarker)
},
methods: {
onClick (e) {
var eMap = e.get('target')
eMap.editor.startEditing()
},
onClick2 (e) {
var myPolygon = new ymaps.Polygon([], {}, {
// Курсор в режиме добавления новых вершин.
editorDrawingCursor: 'crosshair',
// Максимально допустимое количество вершин.
editorMaxPoints: 5,
// Цвет заливки.
fillColor: '#00FF00',
// Цвет обводки.
strokeColor: '#0000FF',
// Ширина обводки.
strokeWidth: 5
})
// Добавляем многоугольник на карту.
yandexMap.geoObjects.add(myPolygon)
// В режиме добавления новых вершин меняем цвет обводки многоугольника.
var stateMonitor = new ymaps.Monitor(myPolygon.editor.state)
stateMonitor.add('drawing', function (newValue) {
myPolygon.options.set('strokeColor', newValue ? '#FF0000' : '#0000FF')
})
// Включаем режим редактирования с возможностью добавления новых вершин.
myPolygon.editor.startDrawing()
},
contextMenu (e) {
var eMap = e.get('target')
eMap.editor.stopEditing()
}
}
}
получаю ошибку
[Vue warn]: Error in v-on handler: "TypeError: Cannot read property 'add' of undefined"
found in
---> <YandexMap>
<Map> at src/components/Map.vue
<VContent>
<VApp>
<App> at src/App.vue
<Root>
если попробовать сделать по примеру из функции onClick
var myPolygon = new e.Polygon([], {}, {
, получаю ошибку
vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in v-on handler: "TypeError: e.Polygon is not a constructor"
found in
---> <YandexMap>
<Map> at src/components/Map.vue
<VContent>
<VApp>
<App> at src/App.vue
<Root>
Прошу откликнуться в решении проблемы, спасибо