googlemaps API V3 之（三）marker集群优化处理

最新推荐文章于 2020-01-10 17:34:26 发布
最新推荐文章于 2020-01-10 17:34:26 发布
阅读量1.5k 收藏 1
点赞数 1
分类专栏： GoogleMaps 文章标签： 集群 优化 api google 框架 手机
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/SeaBlue_Java/article/details/6652050
版权

googlemaps上标记太多时会占满地图或者加载太卡，特别是可视的区域内只是包含了标记的一小部分，而你全部加载标记的话。那么加载会托慢很多，特别是用在手机上更是值得关注。

在网上找了很多大多不怎么好用，也出了很多问题，本来想用sench touch的 Ext.Map()不过后来会出现很多问题不好解决，所以放弃使用sench touch的Map框架。

在这里主要集群标记的优化有两个：1.但可视区域标记过多时会聚集成一个点显示这里面有多少个标记，即少了标记过多的加载又防止了标记占满地图，效果还是很不错的 

这个主要是用了googlemaps的一个google做的插件MarkerClusterer,可以在http://gmaps-utility-library.googlecode.com/svn/trunk/markerclusterer/1.0/这里面进行下载以及参考使用


还有其他很多种，不过个人觉得还是这种比较好...

海蓝色的天空
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
谷歌地图 聚合marker例子
08-19
谷歌地图 大批量打点marker 聚合打点 例子，可以参考，国内可以打开。
marker-spider:处理 Google Maps JS API v3 中的重叠标记，Google Earth 风格
06-11
关于我 作为原作者的建议。 我克隆了项目Overlapping Marker Spiderfier并开始了我自己的重写。 用于 Google 地图的标记蜘蛛 有没有注意到，在，当您单击它们时，相互重叠的标记图钉如何优雅地弹开，以便您可以选择您想要的那个？ 有没有注意到，在使用，同样的事情不会发生？ 此代码使 Google Maps API版本 3地图标记以 Google Earth 的方式运行（减去动画）。 少量标记（是的，最多 8 个）蜘蛛成一个圆圈。 更大的数字扇出成更节省空间的螺旋。 编译后的代码没有谷歌地图之外的依赖项。 当从编译出来时，它低于 3K，用谷歌的缩小并压缩。 我将它作为“Mappiness”数据下载功能的一部分编写： : 。 现在还有“传单地图 API 的端口”： : 。 聚类不能解决这个问题吗？ 您可能已经看过，它也有助于处理靠近在一起的标记。
google-map-cluster:带有地图集群的谷歌地图 V3 示例，由揭示和构造函数模式设计
06-01
酒店分组谷歌地图 这是 Google Map V3 的示例，用于从搜索提取的酒店集群品牌查找器。 安装前，机器 安装 $git clone 路由根项目 $node server.js 打开新窗口浏览器： 蜜蜂
Google Map MarkerCluster使用簡介
08-29
Google Map MarkerCluster使用簡介 可使用此方式使marker自動表現群聚 相當的方便！
Google地图大数据量处理的探讨
diejia1113的博客
01-23 324
最近用到了Google地图进行开发，对Google地图的API有了初步的认识。使用Google API开发一般都会用到Marker，用来标注位置。本文将对显示大数据量的Marker进行研究和讨论。 问题提出： 如果你需要在地图上展示大数据量的Marker，就会发现两个问题。 1、性能问题：如果在地图上添加越多的Marker，使用起来就会感觉速度越慢。速度的快慢还取...
Google+Map+MarkerCluster++使用簡介
08-01
Google+Map+MarkerCluster++使用簡介
Google地图多marker显示，并且在marker数量增多时聚合
01-19
基于PHP和jQuery的Google地图开发之多个marker显示，并且设置让其在数量过多时聚合。由于是给外国客户开发的接口（还没有做完，只是一个demo），所以里面的说明注释都是英文的，但我相信你们看得懂的
Google Maps API V3 中文参考文档(JavaScript)
11-20
Marker 是 Google Maps API V3 中的一种重要组件，用于在地图上标记特定的位置。开发者可以使用 MarkerOptions 对象来配置标记的基本属性，如位置、图标、标题等。MarkerShape 对象提供了多种标记形状，包括圆形、...
google.maps:实现 Google Maps API v3 的 Ashtree PHP 插件
07-14
Google Maps API v3 是 Google 提供的一套用于在网页上集成和操作地图的 JavaScript 库。这个库允许开发者创建交互式、自定义的地图，包括添加标记、绘制形状、实现地理编码（地址转换为经纬度）等功能。Ashtree ...
GOOGLE MAPS API V3
11-22
Google Maps JavaScript API V3 是一个强大的工具，允许开发者在网页上集成谷歌地图的功能，提供丰富的交互式地图体验。这个API版本带来了许多改进和新特性，使得开发更加高效和灵活。以下是对主要知识点的详细说明...
谷歌地图api，聚合功能
08-11
代码实例，主要看看引用了哪些个文件，我是从 https://github.com/Leaflet/Leaflet.markercluster 找到的下载包和实例
markerclusterer.js
12-03
Google Maps谷歌地图聚合markerclusterer.js 可以将 MarkerClusterer 库与Maps JavaScript API结合使用，以将紧密接近的标记合并到群集中，并简化标记在地图上的显示；群集上的数字指示其包含的标记数。请注意，当您放大任何一个群集位置时，群集上的数字都会减少，并且您开始在地图上看到各个标记。缩小地图会再次将标记合并为群集。
Google Maps API v3 (3.16.2) 离线开发包_140326
03-26
8. **性能优化**：Google Maps API v3注重性能，通过分块加载地图数据和延迟渲染等方式，提高了在低带宽环境下的运行效率。 9. **兼容性**：API通常与主流的现代浏览器兼容，包括Chrome、Firefox、Safari、Edge和...
Google Maps API地图应用示例分享
09-04
Google Maps API 是一个强大的工具，允许开发者在网页或者应用程序中集成谷歌地图的功能。这个API提供了丰富的功能，包括但不限于显示地图、定位用户位置、添加标记、创建路径、设置地图类型、以及实现交互式地图...
百度地图之标注聚会
xiangzhihong8的专栏
02-17 1811
俗话说站在巨人的肩膀上将事半功倍，在写android的百度地图标注物聚合时，我在网上也进行了大量的查询，发现标注物聚合的算法很早就有人写了，不过他们是js或者是Google地图c#版的。借鉴他们的想法，我写了android的这版代码与大家一起分享。 一、牛人们的想法 下面是我参考的有关的博客，下面将一一列举 1.MarkerCluster之百度地图版  http://hi.baidu
google MarkerClusterer v3
删去昨天的专栏
11-25 1273
https://github.com/googlemaps/js-marker-clusterer源码地址。
谷歌地图标记定位和标记群集
dadada_youzi的博客
01-10 416
<#assign tags=JspTaglibs["/WEB-INF/tld/tags.tld"] /> <!DOCTYPE html> <html> <head> <base href="${path}/"> <meta charset="utf-8"> <meta name="vi...
Google 地图 API V3 之 叠加层
manbufenglin的专栏
03-06 7734
叠加层概述 叠加层是地图上与纬度/经度坐标绑定的对象，会随您拖动或缩放地图而移动。叠加层表示的是“添加”到地图中以标明点、线、区域或对象集合的对象。 Maps API 包含以下几种叠加层： 地图上的单个位置是使用标记显示的。标记有时可显示自定义的图标图片，这种情况下标记通常被称为“图标”。标记和图标是 Marker 类型的对象。（有关详情，请参阅下面的标记和图标。） 地图上
google map v3开发----多点标注
错误集中营
05-08 3441
先定义一个全局的数组例： var markersArrar=[]; 上面标的很清楚了吧？？ 左下角的那个圈里应该是“单击事件”  点击地图上的标注点的时候会触发一个时间，这里的时间是弹出一个窗口！ 多点标注的问题：             上面的多点标注没有问题，在click的时候发现，不管点击那个点，传的参数都是一样的。悲剧了  经过多次测试 用
对Google Maps API的JS文件解析(map.js)
最新发布
05-24
Google Maps API提供了一些JavaScript文件，其中map.js是其中一个，它主要用于管理地图的显示和功能。下面对其进行一些解析： 1. 引入文件 首先，需要在HTML文件中引入Google Maps API的JavaScript文件，包括map.js。引入的代码如下所示： ```html <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script> ``` 其中，YOUR_API_KEY是你的API密钥，initMap是地图初始化的回调函数。 2. 初始化地图 在map.js中，我们需要定义initMap函数，该函数用于初始化地图并设置地图的初始参数。其中，需要指定地图的中心点、缩放级别、地图类型等。以下是一个简单的示例： ```javascript function initMap() { var map = new google.maps.Map(document.getElementById('map'), { center: {lat: 37.7749, lng: -122.4194}, zoom: 13, mapTypeId: 'roadmap' }); } ``` 其中，map变量表示地图对象，document.getElementById('map')表示地图的容器元素，{lat: 37.7749, lng: -122.4194}表示地图的中心点坐标，zoom表示地图的缩放级别，mapTypeId表示地图的类型。 3. 添加标记 在地图上添加标记是很常见的操作，可以通过以下代码实现： ```javascript function initMap() { var map = new google.maps.Map(document.getElementById('map'), { center: {lat: 37.7749, lng: -122.4194}, zoom: 13, mapTypeId: 'roadmap' }); var marker = new google.maps.Marker({ position: {lat: 37.7749, lng: -122.4194}, map: map, title: 'San Francisco' }); } ``` 其中，marker变量表示标记对象，position表示标记的位置，map表示标记所在的地图对象，title表示鼠标悬停在标记上时显示的文本。 4. 添加事件监听器 在map.js中，可以给地图或标记添加事件监听器，例如点击事件、鼠标移动事件等。以下是一个示例： ```javascript function initMap() { var map = new google.maps.Map(document.getElementById('map'), { center: {lat: 37.7749, lng: -122.4194}, zoom: 13, mapTypeId: 'roadmap' }); var marker = new google.maps.Marker({ position: {lat: 37.7749, lng: -122.4194}, map: map, title: 'San Francisco' }); marker.addListener('click', function() { alert('You clicked the marker!'); }); } ``` 该示例在标记上添加了一个点击事件监听器，在点击标记时会弹出一个提示框。 以上就是对Google Maps API的JS文件解析(map.js)的简单介绍。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值