yandex-maps-unofficial / vue-yandex-map

Yandex Maps Component for VueJS
MIT License
359 stars 103 forks source link

Uncaught TypeError: e.get is not a function #430

Closed mirodil1 closed 5 months ago

mirodil1 commented 1 year ago

I am using vue-yandex-map on vue 3, everything is working fine, but getting error when using functions.

export default {
  data: () => ({
    coords: [54, 39],
  }),
  methods: {
    onClick(e) {
      this.coords = e.get('coords');
    }
  }  
}

Here when onClick() is called, I am getting Uncaught TypeError: e.get is not a function // [Vue warn]: Unhandled error during execution of native event handler. and is it possible to get user location ? Tried using loadYmap but also giving an error Uncaught TypeError: e.get is not a function. Thanks in advance.

PNKBizz commented 1 year ago

Please show all your code

mirodil1 commented 1 year ago

@PNKBizz Thanks for answer. Here is the code. Maps.vue

<template>
    <div>
        <yandex-map
            :coords="coords"
            :controls="controls"
            style="width: 100%; height: 100vh"
            :zoom="zoom"
            :cluster-options="clusterOptions"
            :icon="markerIcon"
            @click="onClick"
        >
            <ymap-marker
            v-for="tree in trees" 
            :coords="[tree.latitude, tree.longitude]"
            :marker-id=tree.id
            :hint-content=tree.name
            :balloon="{header: tree.name}"
            cluster-name="1"
            :icon="markerIcon"
            />
       </yandex-map>
    </div>
</template>

<script>
import axios from 'axios';
import {loadYmap, yandexMap, ymapMarker } from 'vue-yandex-maps'

export default {
    name: "Maps",
    components: { yandexMap, ymapMarker },
    data() {
        return {
        trees: [],
        coords: [
            41.29,
            69.23,
        ],
        user_coords: null,
        zoom: 11,
        controls: ['zoomControl'],
        markerIcon: {
            layout: 'default#imageWithContent',
            imageHref: 'img.png',
            imageSize: [43, 43],
            imageOffset: [0, 0],
            contentOffset: [0, 15],
        },
        clusterOptions: {
                1: {
                clusterDisableClickZoom: false,
                clusterOpenBalloonOnClick: true,
                clusterHideIconOnBalloonOpen: false,
                geoObjectHideIconOnBalloonOpen: false,

                clusterIcon: 'img.png',
                clusterIcons: [
                    {
                      href: 'img.png',
                      size: [60, 60],
                      offset: [-20, -20]
                    },
                ],
                        },
    },
    } 
    },
    mounted() {
        this.getData()
    },
    methods: {
        async getData() {
            await axios
                .get("http://127.0.0.1:8000/api/v1/trees/")
                .then(response => {
                    this.trees = response.data
                    console.log(this.trees)
                })
                .catch(error => {
                    error.value = error
                    console.log(error)
                })
        },
        onClick(e) {
                this.user_coords = e.get('coords');
                console.log(this.user_coords)
        },
    }

}
</script>

Here is the error. image

PNKBizz commented 1 year ago

Ok, i understood the problem. Will try to fix it asap

PNKBizz commented 1 year ago

By the way - try to use vue-yandex-maps@beta. This version was created special for Vue 3. I thik it might be better

mirodil1 commented 1 year ago

ok thanks, and how can i get user geolocation in my case? Can you show me an example please?!

akbarjalolov commented 1 year ago

Good day, any news about this issue? I have the same error.

Arterixs commented 5 months ago

The problem is that for every click two events occur, the r event has a get method, and PointerEvent does not have a get method. This maneuver helped me.

const onClick = (e) => {
  if (e.get) {
    ... // work without TypeError
  }
};
daniluk4000 commented 5 months ago

Looks like a feature then

farukhchik commented 2 months ago

Is there any fix for this issue?