Google maps library的使用

Posted 2020-07-09 新西兰程序员

公司的项目中用到了google地图API, 使用Google API开发就会用到Marker, 用来在google 地图上标注位置

但是google marker使用过程中也有个问题，就是如果在google 地图上标注了大量的Marker, 一个是容易导致google地图加载速度变慢，另一个是marker太多，地图就很

不好看，甚至是看不清楚了，因为你会发现地图就被这些Marker占据了

在Google Maps API中，提供了集群来解决这个问题，也就是MarkerClusterer,

我们之前用的library(Google 提供) ： https://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js

然后在Google maps上的图片标记url是： https://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/images/m

一般在JS中用法如下：

var mc = new MarkerClusterer(map, markers, {

imagePath: ‘https://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/images/m‘
});

然而，在12/05/2016, Google decommissioned the google-maps-utility-library-v3.googlecode.com source for this library. 也就是说，今年的5月12日，google停止了这个library的使用，google把它移到了GitHub上。

GitHub地址： https://cdn.rawgit.com/googlemaps/js-marker-clusterer/gh-pages/src/markerclusterer.js

https://github.com/googlemaps/js-marker-clusterer

https://github.com/googlemaps/js-marker-clusterer/blob/gh-pages/src/markerclusterer.js

图片地址是 https://github.com/googlemaps/js-marker-clusterer/tree/gh-pages/images

在你的开发环境中如何使用它呢？ 使用步骤如下：

1. Find your link on GitHub, and click to the "Raw" version of the file.

2. Copy the URL, and link to it

3. Change raw.githubusercontent.com to rawgit.com (non-production) or cdn.rawgit.com(production)

 

所以，在markerclusterer.js中，把图片地址由 https://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/images

改为 https://cdn.rawgit.com/googlemaps/js-marker-clusterer/gh-pages/images