谷歌markercluster

author author     2022-09-11     548

关键词:

我们有时候需要观察地图 不同地方数据的所在范围和分布密集情况,热力图和聚合点的使用无疑是最好的选择。

1.首先说说百度地图,只做国内的地图可以使用百度地图的海量点和热力图还是蛮好用的。

a.海量点的最大好处是加载很多数据点的情况下不卡顿。

b.如果是画mark在地图上,当点多的时候,会很卡。

c.我之所以用谷歌地图的热力图,是因为我发现百度地图的热力图没有叠加功能,满足不了我的需求。比如说我想了解全国姓张,李,王的人的对比分布,我想要姓张的区域显示红色,姓李的显示蓝色,姓王的显示橙色。这个需求百度地图无法满足我,但是谷歌可以。

2.说说谷歌地图,谷歌地图的热力图我就不说了,https://developers.google.com/maps/documentation/javascript/examples/        这里面有实例的。

a.谷歌地图支持热力图叠加,但是没有海量点,这一点让我很难过,如果全部画marker的话,数据点太多,加载太卡

b.这就用到了谷歌聚合点,如图

技术分享

技术分享

3.代码实例,主要看看引用了哪些个文件,我是从      https://github.com/Leaflet/Leaflet.markercluster    找到的下载包和实例

 

<!DOCTYPE html>
<html>
<head>
<title>Leaflet debug page</title>

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-07I2e+7D8p6he1SIM+1twR5TIrhUQn9+I6yjqD53JQjFiMf8EtC93ty0/5vJTZGF8aAocvHYNEDJajGdNx1IsQ==" crossorigin="" />
<script src="https://unpkg.com/[email protected]/dist/leaflet-src.js" integrity="sha512-WXoSHqw/t26DszhdMhOXOkI7qCiv5QWXhH9R7CgvgZMHz1ImlkVQ3uNsiQKu5wwbbxtPzFXd1hK4tzno2VqhpA==" crossorigin=""></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="screen.css" />

<link rel="stylesheet" href="../dist/MarkerCluster.css" />
<link rel="stylesheet" href="../dist/MarkerCluster.Default.css" />
<script src="../dist/leaflet.markercluster-src.js"></script>
</head>
<body>

<div id="map"></div>
<button id="populate">Populate 1 marker</button>
<button id="remove">Remove 1 marker</button>

<script type="text/javascript">

var tiles = L.tileLayer(‘https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png‘, {
maxZoom: 18,
attribution: ‘&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors‘
}),
latlng = new L.LatLng(50.5, 30.51);

var map = new L.Map(‘map‘, {center: latlng, zoom: 15, layers: [tiles]});

var markers = new L.MarkerClusterGroup();
var markersList = [];

function populate() {
for (var i = 0; i < 100; i++) {
var m = new L.Marker(getRandomLatLng(map));
markersList.push(m);
markers.addLayer(m);
}
return false;
}
function populateRandomVector() {
for (var i = 0, latlngs = [], len = 20; i < len; i++) {
latlngs.push(getRandomLatLng(map));
}
var path = new L.Polyline(latlngs);
map.addLayer(path);
}
function getRandomLatLng(map) {
var bounds = map.getBounds(),
southWest = bounds.getSouthWest(),
northEast = bounds.getNorthEast(),
lngSpan = northEast.lng - southWest.lng,
latSpan = northEast.lat - southWest.lat;

return new L.LatLng(
southWest.lat + latSpan * Math.random(),
southWest.lng + lngSpan * Math.random());
}

markers.on(‘clusterclick‘, function (a) {
alert(‘cluster ‘ + a.layer.getAllChildMarkers().length);
});
markers.on(‘click‘, function (a) {
alert(‘marker ‘ + a.layer);
});

populate();
map.addLayer(markers);

L.DomUtil.get(‘populate‘).onclick = function () {
var bounds = map.getBounds(),
southWest = bounds.getSouthWest(),
northEast = bounds.getNorthEast(),
lngSpan = northEast.lng - southWest.lng,
latSpan = northEast.lat - southWest.lat;
var m = new L.Marker(new L.LatLng(
southWest.lat + latSpan * 0.5,
southWest.lng + lngSpan * 0.5));
markersList.push(m);
markers.addLayer(m);
};
L.DomUtil.get(‘remove‘).onclick = function () {
markers.removeLayer(markersList.pop());
};
</script>
</body>
</html>
































































MarkerCluster V3 停止正常工作

】MarkerClusterV3停止正常工作【英文标题】:MarkerClusterV3stoppedworkingproperly【发布时间】:2016-09-0721:05:06【问题描述】:我正在使用来自github的MarkerCluster_compiled.js。但是,虽然逻辑有效,但它的图形从昨天开始就失败了。问题似乎... 查看详情

Google Map API V3-MarkerCluster 未定义

】GoogleMapAPIV3-MarkerCluster未定义【英文标题】:GoogleMapAPIV3-MarkerClustererundefined【发布时间】:2013-06-1518:00:04【问题描述】:我按照图书馆和youtube指南将标记聚类器添加到我的地图,但我遇到了问题。MarkerClustererundefined我已将MarkerC... 查看详情

Python - Folium 搜索插件不会在 MarkerCluster 组层中搜索弹出文本

】Python-Folium搜索插件不会在MarkerCluster组层中搜索弹出文本【英文标题】:Python-FoliumSearchPluginDoesn\'tSearchPopupTextinMarkerClusterGroupLayer【发布时间】:2020-08-2514:55:37【问题描述】:除了实际使用搜索栏外,我的叶图、标记集群、图层... 查看详情

在谷歌地图上加载 100-200K 标记

...大约500个标记。出于显示目的,我在浏览器的客户端使用markerCluster并使用此工具对标记进行分组。但是,我计划扩大位置数量,并假设它可以快速增长到100K甚至200K。我做了一 查看详情

高德地图的marker和markercluster的应用场景分析

...难识别重叠了几个坐标点,分别是哪几个点。所谓点聚合MarkerCluster就是,在地图缩小的一定比例时,预定距离内的点会自动合并成一个点显示【上图中有3数字的点就是一个聚合点,说明有3个坐标合并的,并通过地图提供的方法... 查看详情

如何从 withHandlers 调用另一个函数?

...中实现谷歌地图。在地图中,我显示了多个Marker并使用了MarkerCluster。到目前为止,我没有任何问题,并且可以从文档中轻松实现。但是现在我想在点击标记时显示 查看详情

悬停在集群组上的弹出窗口

...时间】:2015-08-1808:54:27【问题描述】:我想在使用Leaflet.markercluster制作的集群组上添加弹出窗口,就像悬停在传单标记上的弹出窗口一样。【问题讨论】:【参考方案1】:借助leaflet.markercluster的github页面中存在的问题,我能够... 查看详情

样式化 MarkerClusterer 图标?

】样式化MarkerClusterer图标?【英文标题】:StylingMarkerClustererIcons?【发布时间】:2011-12-1116:00:56【问题描述】:我正在使用MarkerCluster.js在我的googlemapsapi中创建集群。集群按照我想要的方式工作,但是我想设置不同于黄色、蓝色和... 查看详情

从数组中删除标记后更新标记簇

】从数组中删除标记后更新标记簇【英文标题】:updatemarkerclusterafterremovingmarkersfromarray【发布时间】:2012-01-0400:22:06【问题描述】:我目前正在使用带有jqueryui地图的markercluster插件。我有两个数组,一个是所有标记(称为标记)... 查看详情

为啥手机上不能用谷歌地图

为什么手机上不能用谷歌地图谷歌已经退出中国大陆市场,目前连接国内普通网络无法接入谷歌服务器。如果移动系统中有GMS框架,谷歌应用程序可以正常打开,但无法连接到谷歌服务器,所以仍然不能使用。如果手机没有内置... 查看详情

标记聚类 - 融合表层 - Google Maps v3

】标记聚类-融合表层-GoogleMapsv3【英文标题】:MarkerClustering-FusionTableLayer-GoogleMapsv3【发布时间】:2011-10-1316:34:02【问题描述】:有没有办法让标记聚类(即makerclusterer)与融合表层一起工作?似乎您必须为markerclusterer分配标记,... 查看详情

Android Studio、谷歌 Firebase、谷歌地图

】AndroidStudio、谷歌Firebase、谷歌地图【英文标题】:AndroidStudio,GoogleFirebase,GoogleMaps【发布时间】:2017-08-1618:37:24【问题描述】:我在macmini上使用AndroidStudio2.3。我首先打开了一个新项目。MainActivity是一个loadingScreenconnectprojecttofireb... 查看详情

怎么用谷歌搜索

1、下载谷歌浏览器,可以去谷歌官网下载,已经安装过谷歌浏览器的同学可以跳过这一步,认为需要使用谷歌浏览器安装插件。 2.下载一个谷歌插件。谷歌浏览器通过该插件访问谷歌搜索,点击插件地址,下载并解压。 ... 查看详情

谷歌地图提供谷歌地方 API 或谷歌地图 API 未返回的结果

】谷歌地图提供谷歌地方API或谷歌地图API未返回的结果【英文标题】:googlemapsgivesresultsnotreturnedbygoogleplacesAPIorgooglemapsAPI【发布时间】:2012-07-0612:15:12【问题描述】:我正在尝试使用Google地图API或GooglePlacesAPI查找悉尼歌剧院的纬... 查看详情

谷歌浏览器安装流程,手把手教你安装谷歌上网助手

参考技术A  1、我已经在谷歌网上应用店安装了谷歌上网助手插件,现在我先把插件禁用了  2、然后我们在网上下载一个谷歌访问助手并解压得到crx文件,我们打开谷歌浏览器右上角的菜单-更多工具-扩展程序,将crx文件往谷歌... 查看详情

谷歌浏览器使用谷歌安装插件

首先下载插件 下载好插件解压后使用谷歌访问助手_v2.3.0.crx文件然后打开谷歌浏览器 点击更多设置--扩展程序--将解压的谷歌访问助手_v2.3.0.crx文件拖进去最后还是要将谷歌浏览器设置http://360.hao245.com/为浏览器主页重启以... 查看详情

从谷歌表格生成谷歌文档模板?

】从谷歌表格生成谷歌文档模板?【英文标题】:Generatingagoogledoctemplatefromgooglesheets?【发布时间】:2020-09-1410:05:44【问题描述】:我正在尝试创建一个由谷歌表格提供的谷歌文档。在工作表中创建的每一行都需要生成一个谷歌文... 查看详情

谷歌在谷歌浏览器中阻止了网站/域

】谷歌在谷歌浏览器中阻止了网站/域【英文标题】:Website/domainbeingblockedbygoogleinGoogleChrome【发布时间】:2018-10-1518:33:50【问题描述】:几天以来,我们在一个名为“id-validation.us”的域中遇到了问题。谷歌在从谷歌浏览器浏览时... 查看详情