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 ...
随机推荐
- codeforces #309 div1 B
题目啰里啰嗦说了一大堆(耐心读完题目就可以秒题了) 首先我们考虑当前置换的开头的循环节的开头 1.如果是1 1->1形成循环节 问题变成i-1的子问题 2.如果是2 1->2->1形 ...
- C++创建一个动态链接库工程
前话 在我们安装一些软件时,进入软件安装目录会经常看到.dll格式文件,系统system目录也存在许多dll文件 在软件游戏(window平台)更新的时候,很大部分是下载dll文件 所以会好奇这是什么 ...
- php Laravel windows安装
先要装一个composer, 如果不会装请看这里composer windows可以直接下载composer-setup.exe, 如果安装失败提示"Unable to connect to ...
- Jdk5.0中出现的新特性
掌握jdk5.0中出现的新特性1.泛型(Generics)2.增强的"for"循环(Enhanced For loop)3.自动装箱/自动拆箱(Autoboxing/unboxin ...
- 利用PyInstaller将python代码封装成EXE(亲测可用)
有些不能成功,有些不全的,下面总结一下,给自己以后看看. 1下载PyInstaller..去官网下载http://www.pyinstaller.org/(我下载的版本) 2不需要安装,解压即 ...
- Factorial
Factorial 计算阶乘 In mathematics, the factorial of a non-negative integer n, denoted by n!, is the pro ...
- 使用SAE部署Flask,使用非SAE flask版本和第三方依赖包的方法
目前SAE的Flask的版本为0.7,但是我从学习开始的flask版本就已经是0.10了,而且一些扩展都是使用的0.10以后的from flask.ext.特性进行引入的.所以需要修改SAE的环境. ...
- 大四实习准备4_java内部类
2015-4-30 [昨天又可耻地休息了一天,懒劲比较大啊.跟懒劲有直接关系,这几天对幸福的感知也黯淡了,对未来的幸福不是那么渴望了.表现在对亲情和爱情上. 我想生活的本意是积极进取.茁壮生长并时常感 ...
- Sencha touch Panel之间的跳转(如不使用TabPanel或者Carousel控件而产生跳转的动画效果)
常规的Sencha touch 应用都是"header content footer"结构,这样的结构无疑将使用TabPanel来实现,而且TabPanel肯定是card布局,这样 ...
- HAOI2011 problem b
2301: [HAOI2011]Problem b Time Limit: 50 Sec Memory Limit: 256 MBSubmit: 1047 Solved: 434[Submit][ ...