uniapp地图-删除标记点

た入场券 2021-08-19 22:53 879阅读 0赞

前言：本篇文章衔接了【[uniapp地图-标记点-多点连线][uniapp_-_-]】文章;下面是一个示例，用到的是本地数组，以及地图的标记点点击事件@markertap，点击标记时触发的，触发前提是需要指定 marker 对象属性 id才会触发。之后拿到markerId循环@markertap绑定的数组中ID相等的splice掉。当然这个只是对本地数据的一个简单的demo，到了项目当中用到接口，根据实际情况进行传参删除指定的标记点。

![在这里插入图片描述][20200101102152132.png]

--------------------

[uniapp地图-点击添加标记点][uniapp_-]

[uniapp地图-标记点-多点连线][uniapp_-_-]

[uniapp子窗体的使用与通信][uniapp]

--------------------

**最终效果-gif图片：**  
![在这里插入图片描述][20200101103328242.gif]

**1. 绑定的markers数组**

PS：需要指定id![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MjI3Mjkx_size_16_color_FFFFFF_t_70]

**2. 绑定标记点点击事件**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MjI3Mjkx_size_16_color_FFFFFF_t_70 1]

**下面是绑定的mktap打印结果：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MjI3Mjkx_size_16_color_FFFFFF_t_70 2]

**3. mktap事件**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MjI3Mjkx_size_16_color_FFFFFF_t_70 3]

[uniapp_-_-]: https://blog.csdn.net/qq_34227291/article/details/102884966
[20200101102152132.png]: /images/20210724/bf968cea422a4d4b87edc3d174563558.png
[uniapp_-]: https://blog.csdn.net/qq_34227291/article/details/103840555
[uniapp]: https://blog.csdn.net/qq_34227291/article/details/103386066
[20200101103328242.gif]: /images/20210724/f6774ef7973742749e8d7d862bd3ec4f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MjI3Mjkx_size_16_color_FFFFFF_t_70]: /images/20210724/072086ef23734bf6b6e4b169ec2528b5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MjI3Mjkx_size_16_color_FFFFFF_t_70 1]: /images/20210724/79998965305844a1bbd497681300b0cf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MjI3Mjkx_size_16_color_FFFFFF_t_70 2]: /images/20210724/bb1a5dc5db714c7c9c41c777ba1fa40d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MjI3Mjkx_size_16_color_FFFFFF_t_70 3]: /images/20210724/b95c1e60c6c948d09a0da62c2966cf3a.png