vue中使用高德地图的自定义标记点击事件

最近在做一个高德地图打点的功能,然后打的点是用自定义标记来做的,然后我上面有一个删除按钮,但是高德地图API的点击方式只有,点击整个标记才会生效,我的需求只想点删除才会生效,查了很多资料也没查到,索性做个笔记发上来给不了解的同学了解一下,免得入坑(第一次写这种文章,有些啰嗦)直接上代码。

第一步:这个就是用自定义标记,我只需要点这个删除生效,其他的不生效,虽说在VUE中,但是不能用@click,要中onclick. 然后方法名括号里面不能带参数
vue中使用高德地图的自定义标记点击事件_第1张图片

第二步:因为VUE中直接用不了onclick的,所以要走个远路,要在window上注册一个方法,而且要在mounted里面
vue中使用高德地图的自定义标记点击事件_第2张图片
第三步:这样注册好就可以直接在VUE中使用onclick方法啦,是不是很简单呢

最后,根据自己的需求来吧,我这个用来删除forEach出来的标记,最后如果想知道删除的是哪个的话,API有个方法就是以下图这个方法,当点击标记的时候,把获取的这个信息存到全局里,然后在删除的点击事件上判断以下forEach的那个数组,就知道自己点的是哪个啦,
在这里插入图片描述
vue中使用高德地图的自定义标记点击事件_第3张图片

你可能感兴趣的:(vue中使用高德地图的自定义标记点击事件)