公司的项目中用到了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. codeforces #309 div1 B

    题目啰里啰嗦说了一大堆(耐心读完题目就可以秒题了) 首先我们考虑当前置换的开头的循环节的开头 1.如果是1 1->1形成循环节 问题变成i-1的子问题 2.如果是2 1->2->1形 ...

  2. C++创建一个动态链接库工程

    前话 在我们安装一些软件时,进入软件安装目录会经常看到.dll格式文件,系统system目录也存在许多dll文件 在软件游戏(window平台)更新的时候,很大部分是下载dll文件 所以会好奇这是什么 ...

  3. php Laravel windows安装

    先要装一个composer, 如果不会装请看这里composer windows可以直接下载composer-setup.exe, 如果安装失败提示"Unable to connect to ...

  4. Jdk5.0中出现的新特性

    掌握jdk5.0中出现的新特性1.泛型(Generics)2.增强的"for"循环(Enhanced For loop)3.自动装箱/自动拆箱(Autoboxing/unboxin ...

  5. 利用PyInstaller将python代码封装成EXE(亲测可用)

    有些不能成功,有些不全的,下面总结一下,给自己以后看看.   1下载PyInstaller..去官网下载http://www.pyinstaller.org/(我下载的版本)   2不需要安装,解压即 ...

  6. Factorial

    Factorial  计算阶乘 In mathematics, the factorial of a non-negative integer n, denoted by n!, is the pro ...

  7. 使用SAE部署Flask,使用非SAE flask版本和第三方依赖包的方法

    目前SAE的Flask的版本为0.7,但是我从学习开始的flask版本就已经是0.10了,而且一些扩展都是使用的0.10以后的from flask.ext.特性进行引入的.所以需要修改SAE的环境. ...

  8. 大四实习准备4_java内部类

    2015-4-30 [昨天又可耻地休息了一天,懒劲比较大啊.跟懒劲有直接关系,这几天对幸福的感知也黯淡了,对未来的幸福不是那么渴望了.表现在对亲情和爱情上. 我想生活的本意是积极进取.茁壮生长并时常感 ...

  9. Sencha touch Panel之间的跳转(如不使用TabPanel或者Carousel控件而产生跳转的动画效果)

    常规的Sencha touch 应用都是"header content footer"结构,这样的结构无疑将使用TabPanel来实现,而且TabPanel肯定是card布局,这样 ...

  10. HAOI2011 problem b

    2301: [HAOI2011]Problem b Time Limit: 50 Sec  Memory Limit: 256 MBSubmit: 1047  Solved: 434[Submit][ ...