公司的项目中用到了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

Google maps library的使用的更多相关文章

  1. Google Ajax Library API使用方法(JQuery)

    Google Ajax Library API使用方法 1.传统方式: <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7. ...

  2. Google Maps瓦片(tile)地图文件下载(1-11层级)

    整理硬盘时,发现一份去年下载的谷歌地图瓦片文件,整理并分享给大家. 地图来源:Google Maps(应该是国内谷歌地图) 采集时间:2017年6月 采集范围:0-6层级世界范围:7-11层级中国范围 ...

  3. Android Google Maps 开始

    由于工作需要,最近对Android的各大地图进行了试用. 其中有Google地图,百度地图,高德地图,还有开源的OSM. 在使用Google地图的时候,官网流程写的非常清楚,但是其中也遇到一些问题.这 ...

  4. 检索Google Maps地图位置(小训练)

    名称:检索地图位置 内容:地图初期显示和检索显示 功能:根据条件检索地图的经度与纬度 1.在这之前我们需要创建一个表(Accoun__c),添加一个重要的字段地理位置情報,它会默认的给你两个字段经度和 ...

  5. Google Maps API V3 之绘图库 信息窗口

    Google官方教程: Google 地图 API V3 使用入门 Google 地图 API V3 针对移动设备进行开发 Google 地图 API V3 之事件 Google 地图 API V3 ...

  6. Google Maps API V3 之 图层

    Google官方教程: Google 地图 API V3 使用入门 Google 地图 API V3 针对移动设备进行开发 Google 地图 API V3 之事件 Google 地图 API V3 ...

  7. Google Maps API V3 之 路线服务

    Google官方教程: Google 地图 API V3 使用入门 Google 地图 API V3 针对移动设备进行开发 Google 地图 API V3 之事件 Google 地图 API V3 ...

  8. Google Maps地图投影全解析(3):WKT形式表示

    update20090601:EPSG对该投影的编号设定为EPSG:3857,对应的WKT也发生了变化,下文不再修改,相对来说格式都是那样,可以到http://www.epsg-registry.or ...

  9. google maps js v3 api教程(3) -- 创建infowindow

    原文地址 前面我们学习了地图和标记的创建.那么今天我们来学习怎样在地图上显示一个窗口(infowindow) infowindow构造函数为:InfoWindow(opts?:InfoWindowOp ...

随机推荐

  1. a标签的link、visited、hover、active的顺序

    a标签的link.visited.hover.active是有一定顺序的,以下是我一直在用的一个顺序,能正确显示四个颜色,我也不知道有没有其他的顺序能正确显示,如果你没办法判断哪个是对的,那就先用这个 ...

  2. Nginx的介绍和使用

    http://blog.csdn.net/shimiso/article/details/8690897 1.什么是Nginx Nginx(发音同 engine x)是一款轻量级的Web 服务器/反向 ...

  3. JVM内存状况查看方法和分析工具

    Java本身提供了多种丰富的方法和工具来帮助开发人员查看和分析GC及JVM内存的状况,同时开源界和商业界也有一些工具可用于查看.分析GC及JVM内存的状况.通过这些分析,可以排查程序中内存泄露的问题及 ...

  4. nginx配置负载均衡与反向代理

    #给文件夹授权   1 chown -R www:www /usr/local/nginx #修改配置文件vim nginx.conf   1 2 3 4 5 6 7 8 9 10 11 12 13 ...

  5. linux下添加PATH环境变量

    添加PATH环境变量,第1种方法:[root@lx_web_s1 ~]# export PATH=/usr/local/webserver/mysql/bin:$PATH 再次查看: [root@lx ...

  6. Myeclipse 8.5 优化设置

    1.1 更改JavaScript文件默认编码 1.2 关闭Myeclipse不需要的启动项 1.3 取消Myeclipse自动更新 1.4 关闭Myeclipse自动验证 1.5 设置Myeclips ...

  7. 部分常见ORACLE面试题以及SQL注意事项

    部分常见ORACLE面试题以及SQL注意事项 一.表的创建: 一个通过单列外键联系起父表和子表的简单例子如下: CREATE TABLE parent(id INT NOT NULL, PRIMARY ...

  8. D3D游戏编程系列(一):DXLib的介绍

    这篇文章里我准备向大家介绍下我封装的一个基础D3D库:DXLib.有了这样一个类库,可以减少很多无用功以及繁琐的工作,使我们的效率大大提高. DXLib.h #define DIRECTINPUT_V ...

  9. JavaBean 内省API BeanUtils工具 泛型 xml xml约束

    1 什么是JavaBean?有何特征? 1)符合特定规则的类    2)JavaBean分二类:     a)侠义的JavaBean         .私有的字段(Field)         .对私 ...

  10. Android开发之动画(转)

    activity跳转的过渡效果,很漂亮,很全 注意,切换方法overridePendingTransition只能在startActivity和finish方法之后调用. 第一个参数为第一个Activ ...