vue中使用google地图大批量渲染marker点

google地图大批量渲染marker点

废话不多说先看效果

前面有篇文章讲的是如何在vue中使用google地图
https://blog.csdn.net/zcc900726/article/details/88915985
在此基础上功能添加

先来json格式

data:[
{
Lat: "32.081697",
Lon: "121.07874989999998"
},{},{}......
]

大批量生成mark点;
chinaMaps 功能实现

使用的 markerclusterer.js包在这个项目例子里面
https://github.com/googlemaps/js-marker-clusterer

注意imges 文件也要复制过去,
还要修改markerclusterer.js 193行 图片相对地址
MarkerClusterer.prototype.MARKER_CLUSTER_IMAGE_PATH_ = ‘/src/assets/gMapImgs/m’;
OK了~ 很简单吧~