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

 

posted on   新西兰程序员  阅读(579)  评论(0编辑  收藏  举报

编辑推荐:
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
阅读排行:
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理
· 单元测试从入门到精通
· 上周热点回顾(3.3-3.9)
· winform 绘制太阳,地球,月球 运作规律
< 2025年3月 >
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5

统计

点击右上角即可分享
微信分享提示