www.cftea.com

Vue 高德地图组件 vue-amap-信息窗体使用注意

ITPOW2019/12/6 17:31:49

信息窗体的标签名称为 el-amap-info-window,可以在其中嵌套模板。通常用 :visible="visible" 控制是否显示信息窗体。

一、不要在显示信息窗体后,又异步加载内容。

因为信息窗体打开后,再异步加载内容,有可能内容太长,会撑大信息窗体,此时信息窗体可不是以中间为原点向两边撑,而是以左边为基准向右边撑。

这导致一个问题:下面那个指向坐标的尖尖也会向右移动,导致给人一种指向不准的感觉。

二、内部组件的事件

前面说了信息窗体标签内部可以嵌套模板,而模板中可能有按钮,按钮的事件如何处理呢?

其中有一个 onEdit 方法,我初始的设想是跟 Marker 一样,将该方法放在 infoWindow 这个对象对应的类中,作为一个成员方法,目的是想获取 infoWindow 这个对象的其他属性,但是在实际使用中,发现在 onEdit 中并无法使用 this 以获取当前 infoWindow,说是 undefined。

我回过头一看,这个跟 Marker 真不一样,Marker 的 events 是个属性,不是方法,于是我改为直接接方法 onEdit。

那怎样获取 infoWindow 这个对象的其他属性呢?

直接用就是了。我们要知道:Marker 通常有很多个,所以如果不用对象的方法,获取当前 Marker 对应的数据比较麻烦,而 infoWindow 只有一个,它对应的对象也只有一个,我们在 onEdit 方法中,直接用 infoWindow 就可以了。

<<返回首页<<