公司的项目中用到了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. Linux防火墙iptables简明教程

    前几天微魔部落再次遭受到个别别有用心的攻击者的攻击,顺便给自己充个电,复习了一下linux下常见的防火墙iptables的一些内容,但是无奈网上的很多教程都较为繁琐,本着简明化学习的目的,微魔为大家剔 ...

  2. P78、面试题10:二进制中1的个数

    题目:请实现一个函数,输入一个整数,输出该数二进制表示中1的个数.例如把9表示成二进制1001,有2位是1.因此如果输入9,该函数输出2. 相关题目: 1)用一条语句判断一个整数是不是2的整数次方.一 ...

  3. pmf,cpmf,pdf,cdf,iid的解释

  4. Java基于Servlet过虑器

  5. cadence allegro PCB中怎么使查找元件时屏幕不移动

    先按F4进入show element状态,你在找元件,屏幕就会移动到你找的元件上面去,并且将视图放大.

  6. Lambda表达式 =>(msdn)

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  7. bash 读入文件

    Suppose we have a file contains the following information, termed input_file: A       0 B       1 C ...

  8. [原]Unity3D深入浅出 - 认识开发环境中的GameObject菜单栏

    Create Empty:创建空对象 Create Other:创建其他对象 Particle System:创建粒子系统 Camera:创建相机 GUI Text:GUI文本 GUI Texture ...

  9. 比较const ,readonly, stitac readonly

    比较const ,readonly, stitac readonly: const和readonly的值一旦初始化则都不再可以改写: const必须在声明时初始化:readonly既可以在声明时初始化 ...

  10. 【App FrameWork】页面之间的参数传递

    若应用中有多个页面,这时2个页面之间可能需要进行参数传递.那么如何来实现呢? 首先想到的就是URL参数传递的方式,如:在panel里设置属性 data-defer="Pages/Shake. ...