Open
Description
VueAMap确实封装了AMap，为vue开发者带来了极大的便利，但是对events事件完全没有封装，加上本身vue架构的特点，是的this作用域晦涩难懂，经常会发生 Uncaught ReferenceError。而且完全不能使用v-on事件绑定，完全打乱了vue架构。
我列举几个实际的例子：
1.根据官方demo中
<template>
<div class="amap-page-container">
<el-amap vid="amapDemo" :zoom="zoom" :center="center" class="amap-demo">
<el-amap-marker vid="component-marker" :position="componentMarker.position" :content-render="componentMarker.contentRender" ></el-amap-marker>
<el-amap-marker v-for="(marker, index) in markers" :position="marker.position" :events="marker.events" :visible="marker.visible" :draggable="marker.draggable" :vid="index"></el-amap-marker>
</el-amap>
<div class="toolbar">
<button type="button" name="button" v-on:click="toggleVisible">toggle first marker</button>
<button type="button" name="button" v-on:click="changePosition">change position</button>
<button type="button" name="button" v-on:click="chnageDraggle">change draggle</button>
<button type="button" name="button" v-on:click="addMarker">add marker</button>
<button type="button" name="button" v-on:click="removeMarker">remove marker</button>
</div>
</div>
</template>
<script>
const exampleComponents = {
props: ['text'],
template: `<div>text from parent: {{text}}</div>`
}
module.exports = {
name: 'amap-page',
data() {
return {
count: 1,
slotStyle: {
padding: '2px 8px',
background: '#eee',
color: '#333',
border: '1px solid #aaa'
},
zoom: 14,
center: [121.5273285, 31.21515044],
markers: [
{
position: [121.5273285, 31.21515044],
events: {
click: () => {
alert('click marker');
},
dragend: (e) => {
console.log('---event---: dragend')
this.markers[0].position = [e.lnglat.lng, e.lnglat.lat];
}
},
visible: true,
draggable: false,
template: '<span>1</span>',
}
],
el-amap-marker click竟然是一个data？？？！！！，而且button都是用v-on绑定click事件，el-amap-marker只能使用:events
2.events中的this到底是什么？
markers: [
{
position: [121.5273285, 31.21515044],
events: {
click: () => {
alert('click marker');
},
dragend: (e) => {
console.log('---event---: dragend')
this.markers[0].position = [e.lnglat.lng, e.lnglat.lat];
}
},
你能猜到click中的this是什么吗？vue中强调computed，watch，methods中的方法都要使用function() {...}，vue会自动注入vue对象给this，但是在这里click中的this无论是否使用箭头函数都无法指向vue对象本身，虽然也有方法可以访问到vue对象，但是都非常不优雅了。
以下是我的临时解决方法
computed: {
events: function() {
return {
click: e => { this.item_OnClick(e.target.get('vid')) },
}
},
},
methods:{
item_OnClick: function(i) {
alert(i + " click")
this.info.visible = false
this.$nextTick(() => {
this.info.obj = i
this.info.visible = true
})
},
希望开发组可以改进这个问题