vue2-google-maps的点聚合踩坑

最近有一个项目需要支持英文地图，之前使用百度地图的api，但百度api的英文服务需要付费。所以想使用谷歌地图实现。

项目是vue2的，所以找到了vue2-google-maps库。项目地址：https://github.com/Jeson-gk/vue2-google-maps

基本地图的实现和点的绘制在项目Readme中示例没有任何问题。

但是在实现点缩放时聚合的时候略微有一点坑。大部分的文章是说使用额外的库“@googlemaps/markerclusterer”，但是在使用中并不是那么方便。

于是研究了一下vue2-google-maps的示例，发现他有点聚合的示例。

按照示例，这个库是有点聚合组件（gmap-cluster）的，只用使用点聚合组件包裹点组件（gmap-marker），在缩放时就能聚合。但是实际使用后，发现并没有gmap-cluster组件，于是将import的东西直接输出。

输出位置：

结果：

在未修改之前这个Cluster属性为undefined。这个是修改了代码之后的。

于是乎直接看源码，发现了一些异常的地方

在这个main.js中发现Cluster是否不为undefined是由process.env.BUILD_DEV决定的，这是个打包的时候的参数。于是乎想重新打包，但是打包的时候使用一个shx命令，我安装失败。

没办法，暴力解，直接看打包之后的文件。幸好打包之后的没做代码混淆之类的。位置：

仿造Marker的定义方法添加Cluster：

大概的代码行数和修改内容如上图。修改之后就能直接使用gmap-cluster组件

完成修改。撒花~~~~~~~~~~~~~~