0

Прошу помочь коллег, пытаюсь создать полигон при нажатии на карту в шаблоне 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>

Прошу откликнуться в решении проблемы, спасибо

1 ответ 1

0

Дело в том что ты пытаешься вызвать метод у не объекта карты. У компонента есть метод который вызывается после инициализации карты.

    <yandex-map
            v-if="polygons.length"
            :coords="coords"
            :map-type="maptype"
            @click="onClick2"
         ++ @map-was-initialized="onInitMap"
    >

добавляем метод в компонент:

methods: {
   data: () => ({
    settings: {
        apiKey: '5050011e-f8a4-4b8f-b989-98479f0acb4b',
        lang: 'ru_RU',
        coordorder: 'latlong',
        version: '2.1'
    },
    coords: [55.82934, 50.47381],
    maptype: 'satellite',
    polygons: [],
++    map: null
  }),
++ onInitMap(map){
++      this.map = map; // сохрани в локальную переменную, потребуется для обработчика что добавляет полигон
++ },
   onClick2 (e) {
      var myPolygon = new ymaps.Polygon([], {}, {
        // Курсор в режиме добавления новых вершин.
        editorDrawingCursor: 'crosshair',
        // Максимально допустимое количество вершин.
        editorMaxPoints: 5,
        // Цвет заливки.
        fillColor: '#00FF00',
        // Цвет обводки.
        strokeColor: '#0000FF',
        // Ширина обводки.
        strokeWidth: 5
      })
      // Добавляем многоугольник на карту.
++      this.map.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()
    },
},

++ - это изменения который нужно внести.

1

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.