Google maps library的使用
公司的项目中用到了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的使用的更多相关文章
- Google Ajax Library API使用方法(JQuery)
Google Ajax Library API使用方法 1.传统方式: <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7. ...
- Google Maps瓦片(tile)地图文件下载(1-11层级)
整理硬盘时,发现一份去年下载的谷歌地图瓦片文件,整理并分享给大家. 地图来源:Google Maps(应该是国内谷歌地图) 采集时间:2017年6月 采集范围:0-6层级世界范围:7-11层级中国范围 ...
- Android Google Maps 开始
由于工作需要,最近对Android的各大地图进行了试用. 其中有Google地图,百度地图,高德地图,还有开源的OSM. 在使用Google地图的时候,官网流程写的非常清楚,但是其中也遇到一些问题.这 ...
- 检索Google Maps地图位置(小训练)
名称:检索地图位置 内容:地图初期显示和检索显示 功能:根据条件检索地图的经度与纬度 1.在这之前我们需要创建一个表(Accoun__c),添加一个重要的字段地理位置情報,它会默认的给你两个字段经度和 ...
- Google Maps API V3 之绘图库 信息窗口
Google官方教程: Google 地图 API V3 使用入门 Google 地图 API V3 针对移动设备进行开发 Google 地图 API V3 之事件 Google 地图 API V3 ...
- Google Maps API V3 之 图层
Google官方教程: Google 地图 API V3 使用入门 Google 地图 API V3 针对移动设备进行开发 Google 地图 API V3 之事件 Google 地图 API V3 ...
- Google Maps API V3 之 路线服务
Google官方教程: Google 地图 API V3 使用入门 Google 地图 API V3 针对移动设备进行开发 Google 地图 API V3 之事件 Google 地图 API V3 ...
- Google Maps地图投影全解析(3):WKT形式表示
update20090601:EPSG对该投影的编号设定为EPSG:3857,对应的WKT也发生了变化,下文不再修改,相对来说格式都是那样,可以到http://www.epsg-registry.or ...
- google maps js v3 api教程(3) -- 创建infowindow
原文地址 前面我们学习了地图和标记的创建.那么今天我们来学习怎样在地图上显示一个窗口(infowindow) infowindow构造函数为:InfoWindow(opts?:InfoWindowOp ...
随机推荐
- Android:调试之LogCat
通过 Logcat 查看: 常用的Log有5个:Log.v().Log.d().Log.i() .Log.w(). Log.e(). Log.i( "类":"函数名&qu ...
- POJ1860——Currency Exchange(BellmanFord算法求最短路)
Currency Exchange DescriptionSeveral currency exchange points are working in our city. Let us suppos ...
- 从今天起,正式步入cnblogs,向曾经的脚印说声对不起!
步入这个行业也好多年了,从来没有定居过一个地方. 看过很多前辈们留下的资料,对后者门(其中还有我)留下很多珍贵的东西. 所以,我要向前辈学习,壮大自己,在学习的同时,不要忘记帮助别人. 对曾经我留下的 ...
- AOSP
定义编辑 "Android Open-Source Project"的缩写 中文意为"Android 开放源代码项目" 内容编辑 在Android Open-S ...
- 为Windows 7添加“Internet打印”功能
http://wangchunhai.blog.51cto.com/225186/1156589/
- linux中fork()函数详解(转)
转自:http://blog.csdn.net/jason314/article/details/5640969 一.fork入门知识 一个进程,包括代码.数据和分配给进程的资源.fork()函数通过 ...
- poj 1924 Paths on a Grid(组合数学)
题目:http://poj.org/problem?id=1942 题意:给定一个矩形网格的长m和高n,其中m和n都是unsigned int32类型,一格代表一个单位,就是一步,求从左下角到右上角有 ...
- poj 2253 Frogger(最短路 floyd)
题目:http://poj.org/problem?id=2253 题意:给出两只青蛙的坐标A.B,和其他的n-2个坐标,任一两个坐标点间都是双向连通的.显然从A到B存在至少一条的通路,每一条通路的元 ...
- 【 D3.js 高级系列 — 1.0 】 文本的换行
在 SVG 中添加文本是使用 text 元素.但是,这个元素不能够自动换行,超出的部分就显示不出来了,怎么办呢? 高级系列开篇前言 从今天开始写高级系列教程.还是那句话,由于本人实力有限,不一定保证入 ...
- 陈正冲老师讲c语言void关键字
1. void a void的字面意思是“空类型”,void *则为“空类型指针”,void *可以指向任何类型的数据. void几乎只有“注释”和限制程序的作用,因为从来没有人会定义一个void变量 ...