yandex-maps-unofficial / vue-yandex-map

Yandex Maps Component for VueJS

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Uncaught TypeError: e.get is not a function

mirodil1 opened this issue · comments

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.

Please show all your code

@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

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

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

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

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

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
  }
};

Looks like a feature then