Map.vue基于百度地图组件重构笔记分享

Map.vue：基于百度地图组件重构笔记分享

Map.vue是专为iview组件设计的百度地图基础组件，它具备多种功能，如判断点是否在框内、绘制多边形覆盖物以及添加自定义富文本标记等。以下是我在重构过程中的笔记分享，希望能为你们带来一些启示。

我们针对自定义富文本对象进行了重构，将其设置为全局对象。在原来的代码中，富文本对象是在addResource方法内部声明的，这导致代码结构较为复杂。为了提升效率和复用性，我们在beforeCreate钩子函数中将其声明为全局对象。这样，我们就可以避免在每次调用paintPolygon方法时都重新声明这个对象，大大简化了代码。

在原始设计中，父组件需要处理富文本对象所需的数据，然后将这些数据传递到富文本对象的构造函数中。在重构过程中，我们将整个数据对象（data对象）直接传递给对象的构造函数，然后根据需要分解data对象来声明对象的属性（如this._content、this._point、this._color等）。这样做的好处是，数据总是在最接近使用它的地方进行处理，使得代码更加简洁明了。

我们还对window.ResOverlay函数进行了重构。新的函数接受两个参数：data和fun。在函数中，我们首先将data赋值给this._data，然后根据data的属性创建this._content、this._point和this._color等对象属性。我们定义了一个this._fun方法，该方法接受一个参数e，并调用传入的fun函数处理data。我们还处理了地图点击事件的冒泡问题，根据浏览器的不同，使用不同的方式阻止事件冒泡。这样，不同类型的资源就可以拥有不同的颜色，而默认颜色则被设置为5cadff。

这次重构使得Map.vue组件更加简洁、高效，并且提高了代码的可维护性和复用性。如果你对基于百度地图的组件开发感兴趣，不妨参考一下这篇笔记。第二步：函数传递与事件响应

在富文本交互开发中，我们时常需要在不同的场景下触发特定的操作。为了实现这一功能，我们需要为富文本添加电脑端的click事件和移动端的touchstart事件。由于涉及到操作父组件中的data数据，我们将采用函数作为参数传递的方式来实现这一功能。

在父组件中，当数据请求并处理完毕后，我们通过调用`addResource`方法，将获取到的资源数据传递给子组件进行处理。我们需要将一个函数`fun`作为参数一并传递。这个函数的作用是处理从父组件中传递过来的数据，并将其赋值给相应的数据属性。

当数据成功获取后，我们在`fun`函数中处理数据。我们将资源名称、资源类型、资源上传者以及资源坐标等数据提取出来，并赋值给相应的组件属性。我们还将处理附件和图像数据，为资源添加图像和附件信息。

在处理完数据后，我们需要判断是否存在图像和附件，并设置相应的标志位。然后，我们显示模态框以展示资源详情。

在构造函数中，我们需要定义一个处理函数`_fun`，该函数接收一个参数`data`。在函数内部，我们首先调用传入的`fun`函数处理数据。然后，根据事件的类型，我们阻止事件的默认行为和传播，以避免不必要的干扰。在IE浏览器下，我们使用`e.preventDefault()`来阻止事件的默认行为；而在其他浏览器（如Chrome）下，我们使用`e.sPropagation()`来阻止事件冒泡。

接下来，在合适的位置添加事件监听器。为`wrapDiv`添加`touchstart`和`click`事件监听器，并传入`_fun`函数作为处理函数。这样，当发生触摸或点击事件时，都会调用`_fun`函数进行处理。

本文已被整理成专题教程，欢迎大家学习阅读。我们也提供了关于vue.js组件的教程链接，希望大家能够多多支持并深入学习。

通过调用`cambrian.render('body')`来渲染富文本内容。在渲染过程中，我们将充分利用之前传递的函数和事件处理机制，以实现丰富的交互效果和流畅的用户体验。

希望本文的内容能够对大家的学习有所帮助，也希望大家能够关注我们的后续教程，共同学习进步。