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 ...
随机推荐
- 深入理解ClassLoader(四)—类的父委托加载机制
上几次我们介绍到了JVM内部的几个类加载器,我们来重新画一下这个图,再来看一下他们之间的关系.
- 阿里云 EDAS-HSF 用户指南
阿里云 EDAS-HSF 用户指南 针对 EDAS v2.3.0©Alibaba EDAS 项目组2015/8/19 1 前言本文档旨在描述阿里云 EDAS 产品中应用服务化模块的基本概念,以及如何使 ...
- [矩阵快速幂]HDOJ4565 So Easy!
题意:给a, b, n, m 求 $\left \lceil ( a+ \sqrt b )^n \right \rceil$ % m 看到 $( a+ \sqrt b )^n$ 虽然很好联想到共轭 但 ...
- 初始化D3D设备
bool initD3D(HWND hWnd) { // 主要目的是获取设备,为调用下面的函数做很多准备. // 比如 获取IDirect3D9 ,获取支持的顶点处理,填充后备缓冲相关参数等. // ...
- WCF 下的windows服务的安装卸载
安装:启动vs2010(如果是win2008要以管理员来启动)命令:installutil demo.exe 卸载:先在服务里停止这个服务,然后启动vs2010(如果是win2008要以管理员来启动) ...
- php.ini – 配置文件详解
详见: https://my.oschina.net/miaowang/blog/299546 这个文件必须命名为''php.ini''并放置在httpd.conf中的PHPIniDir指令指定的目录 ...
- [PHP] - 逗号和点号的区别
比如:1. echo 'abc'.'def'; //用点号连接字符串 2. echo 'abc','def'; //用逗号连接字符串 也许很多人都知道逗号要比点号快.但是不知道为什么.更不知道这两者到 ...
- ORACLE【1】:触发器详解
转自:http://blog.csdn.net/indexman/article/details/8023740 ORACLE PL/SQL编程之八: 把触发器说透 本篇主要内容如下: 8.1 触发器 ...
- php discuz框架接口不能正常访问的问题
本人php小白,无php编程基础,直接上php服务器部署,后果很严重.....所以务必看完请给”顶“给评论,以表示对小白的鼓励和赞赏! 关于discuz框架,独自加班,废寝忘食,然已无力吐槽..... ...
- 在 Azure 中使用公用 IP 创建多 NIC VM
Russ Slaten 2014年 11 月 18日下午 4点 我们最近宣布了支持具有多个网络接口控制器 (NIC) 的虚拟机 (VM).我仍在努力了解此功能适用的所有新场景,但首先,我希望亲自测试 ...