谷歌地图上 100k 或更多标记,无需聚类

2024-04-18

我有一些通过安装在汽车上的 GPS 设备收集的数据。所以我拥有的数据基本上都位于街道/道路上/周围。每个坐标都有一些值。数据的格式是这样的。

lat         | long        | value
---------------------------------
12.979155   | 77.644925   | 6 
---------------------------------
12.97916833 | 77.64493667 | 2
---------------------------------
12.97917167 | 77.64492167 | 8 

我在这里的任务是在谷歌地图上绘制这些经纬度。当我们谈论放置 10 个、100 个或 1000 个标记时,这似乎是相当容易的任务。但正如我上面提到的,我们通过驱动器收集数据,两个经纬度或两个点之间的距离将在几英尺内(例如 2-3 英尺)。

因此,在调查结束时,对于城市的一小部分,我将获得 90-100k 经纬度,对于整个城市,可能会达到 100 万。

我尝试添加 9-10k 标记,它的工作正常,但是当我尝试加载 40k、50k、60k 时,它使我的浏览器非常慢,这是我结束时的错误消息。

Uncaught RangeError: Maximum call stack size exceeded      main.js:1

我已经在谷歌上搜索了很多相关内容,但我找不到任何示例或教程可以引导我使用我了解的技术(即 asp.net)放置 100 万个标记。 找到了这个例子http://www.scribblemaps.com/markerComplex/ http://www.scribblemaps.com/markerComplex/作者:Jonathan Wagner,但我无法理解它并在我现有的代码中实现它,如下所示。

//从 MSSQL 服务器获取经纬度。

function PushValues(ParameterID) {
         a = ParameterID.slice(5);
    var CityID = $('#ddlCity').val().split('|');
    $.ajax({
        type: "POST",
        url: "index.aspx/PushLatLong",
        data: "{CityID:'" + CityID[0] + "',OperatorID:'" + $('#ddlOperator').val() + "',ParameterID:'" + ParameterID.slice(4) + "'}",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        async: false,
        cache: false,
        success: function (response) {
            GooglePlaces = response.d.split('#');
            if (GooglePlaces != "Blank") {
                HasValues = 1;
            } else {
                HasValues = 0;
            }

        },
        Error: function (r) {

        }
    });
}

// 将值放入谷歌地图中。

function PlaceValues() {
    var options = { zoom: 3, center: new google.maps.LatLng(37.09, -95.71), mapTypeId: google.maps.MapTypeId.ROADMAP };
    var map = new google.maps.Map(document.getElementById('map'), options);
    var bounds = new google.maps.LatLngBounds();
    for (var i = 0; i < GooglePlaces.length; i = i + 2) {
        ltlg = new google.maps.LatLng(GooglePlaces[i], GooglePlaces[i + 1]);
        var marker = new google.maps.Marker({
            position: ltlg,
            map: map,
            title: 'Place number',
            icon: "img/GoogleIcons/" + legendfirstvalue[1]
        });
        bounds.extend(ltlg);
    }
    map.fitBounds(bounds)
    $('#DivLoadImage').hide();
}

我想在这里提到的另一件事是标记的颜色取决于经纬度的值。所以我会有多种颜色标记。我可以轻松地尝试将标记聚集在一起,但是,然后我将无法看到标记颜色,直到我放大到该区域。所以我无法使用cluster。

我确信我的代码中会有数百万个错误。如果需要的话,我愿意改变我的方法。Here http://coeindia.in/test/harry/index.html是应用程序的演示。


您可以得到的最接近的(没有集群)是使用融合表来存储数据并从那里检索数据 - 这可能与您的示例已经使用的类似 - 并且由于它的闪存,它可以比普通 api 更快地渲染它们。

Fusion 表本身将在服务器端将标记渲染为图块并检索这些标记。

Google Maps API 允许您呈现 Google 中包含的数据 使用 FusionTablesLayer 对象将 Fusion Table 作为地图上的图层。

关于它的例子在这个链接中。 https://google-developers.appspot.com/maps/documentation/javascript/examples/layer-fusiontables-simple

与 fusiontables 一起,我会做类似基于视口的渲染之类的事情,这基本上意味着只绘制视口可见的标记 - 不是真正的“聚类技术”,但当我们考虑渲染速度时非常有用。了解更多关于他们的信息谷歌文档(融合表) https://developers.google.com/maps/articles/toomanymarkers#fusiontables and 视口标记管理。 https://developers.google.com/maps/articles/toomanymarkers#viewportmarkermanagement同一页面还包含更详细的链接Fusiontable API https://developers.google.com/fusiontables/docs/v1/getting_started和教程。

如果您最终决定在服务器端进行集群 - 请做好准备,这不是一件容易的任务 - 但如果您这样做,请实现类似于基于网格的集群的东西。 (还在同一页面中进行了解释 - 该死的好链接?)

还需要注意的是:

仅表中的前 100,000 行数据会映射或包含在查询结果中。

要阅读更多内容,从这里看。 https://developers.google.com/maps/documentation/javascript/layers#FusionTables

Cheers.

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

谷歌地图上 100k 或更多标记,无需聚类 的相关文章

  • 如何使用 pincode 作为输入查找纬度和经度列表

    有什么方法可以使用 zip pincode 找到纬度和经度列表吗 Input 560103 Output 12 123456 72 123456 12 123654 72 366666 12 123456 72 123456 on goog
  • Google Map API 3 从 API 2 的代码中为标记创建不同的颜色

    我在 API 2 中使用了此代码 但找不到 API 3 的等效代码 我想根据严重性为标记创建不同的颜色 因此它们不是静态值 我有如何创建的问题GICON G DEFAULT ICON GSize 和 addOverlay 如果有人告诉我如何
  • ... 不支持谷歌地图 Javascript API。使用其他浏览器

    我正在使用两个不同的第三方程序 不同的公司 它们显然使用 Google Maps Javascript API 当他们加载地图时 会显示世界地图 但会显示一条错误消息 Der von Ihnen verwendete Browser wir
  • 我的 Google 地图 javascript 代码显示在桌面浏览器上,但不显示在我的手机浏览器上

    好的 我已经查过了 但只找到了一页 Google 地图 API 地理位置不适用于移动设备 https stackoverflow com questions 12136615 google maps api geolocation not
  • 如何使用 Maptiler 在 Google 地图中显示图块

    我有一个 1810x14871 png 文件 我想将其显示为 Google 地图上的图块 我正在使用Maptiler 我想向您确认几点 1 因为我想在谷歌地图上显示它 因此 在第一个屏幕中我必须选择 墨卡托瓷砖 对吗 2 在坐标系屏幕中 我
  • Google Maps API 多边形文物在缩放上显示

    我有一个使用 JS API 构建的 Google 地图 其中包含英国不同地区的多边形 在 Chrome 已测试 v58 和 v60 上 当用户使用滚轮放大或缩小时 多边形的随机伪像会卡在地图上 进一步缩放可以消除它们或显示不同的伪影 在 F
  • 融合表查询

    我有一个非常大的融合表 现在 我想根据用户需求进行查询 我的用户界面应该有一个下拉框来选择列的名称 另一个下拉框用于选择查询条件 gt user1225902 您需要在页面加载期间调用onLoad函数 我有同样的问题
  • 谷歌地理编码 API 不如使用地址的谷歌地图准确

    我有很多例子 其中谷歌地图返回确切的位置 而地理编码无法找到精确的匹配 并且仅提供紧密匹配的纬度 经度 这对我的目的没有好处 例如 谷歌地图中的 1729 State Road 8 auburn IN 46706 将我精确地定位到了沃尔玛配
  • 谷歌地图搜索框在地图外面

    我正在使用 Google Maps API 并且插入了一个具有自动完成功能的搜索表单 问题是输入框卡在地图中 我无法将其显示在地图之外 div style margin top 100px background 00a6d6 width 1
  • Google 地图:挪威邮政编码未返回任何结果

    简而言之 我们有一些挪威邮政编码 并正在使用 API 来获取它们的地址以及经纬度 没什么高雅的 但在大约 10 的邮政编码上 API 不返回任何结果 下面是一个示例 成功为postal code 1151 http maps googlea
  • 如何使用 Google Direction api 或 iPhone 应用程序的其他一些 api 比较两条路线

    我想比较两条路线以检查它们在我的 iPhone 应用程序中是否相同 有一个人X想要从A点到B点 另一个人想要从A1点到B1点 我可以使用谷歌的方向 API 获取 A 到 B 之间的路线 http maps googleapis com ma
  • 来自 geoJSON 的 Google 地图航点

    我想从 geoJSON 文件加载行程 目前来说 它是有效的 但只有两点 但我需要添加 4 或 5 个航路点 我的代码只读取前两个点并将它们设置为起点和目的地 这是我的代码 google maps event addListener map
  • Google 地图上的自定义路线/路径/道路

    我需要能够使用 V2 或 V3 最好是 3 创建在某种意义上忽略建筑物的路径 我试图创建一个 kml 文件来自己绘制所有路径 然后找到某种方法根据需要打开 关闭它们 例如 用户想要从 A 点前往 B 点 这些点之间有许多建筑物 用户可以实际
  • 有没有办法限制 Google 地点自动完成功能搜索城市的街道?

    使用 Google 地方信息时可以将搜索限制在城市的街道吗Autocomplete 您可以设置Autocomplete使用选项geocode作为类型 这将限制返回到地址的结果 var input document getElementByI
  • isLocationOnEdge 公差计算(以公里为单位)

    我正在使用谷歌地图地图API位置在边缘 var isLocationNear google maps geometry poly isLocationOnEdge latlng new google maps Polyline path g
  • 如何找到特定路线上两点之间的距离?

    我正在为我的大学开发一个 Android 应用程序 可以帮助学生跟踪大学巴士的当前位置 并为他们提供巴士到达他们的预计时间 截至目前 我获取了公交车的当前位置 通过公交车上的设备 和学生的位置 我陷入了必须找到两个 GPS 坐标之间的距离的
  • Google 地图 API:忽略 DirectionService 请求中的季节性限制

    我目前正在开发一张地图 其中显示两点之间的最短路线 使用不同的交通工具 我注意到 有时 例如在冬季关闭的道路不会被考虑在内 我发现我可以使用方向服务 下面的代码 忽略高速公路 收费站和渡轮 但我一生都无法弄清楚如何 是否可以忽略季节性限制
  • 如何设置透明叠加 WMS 图层的样式

    我成功了覆盖WMS层 http blog sumbera com 2010 11 02 tiled wms overlay on google map v3 然而 在谷歌地图v3中 由于图块上的信息是透明的黑色 因此在深色背景 如卫星地图
  • Android键盘点击搜索输入时出现和消失

    我在用谷歌地图 Js API当我搜索一个地方时 我的输入搜索栏工作正常 当我通过 iPhone 设备使用它时 它也工作得很好 但是当我通过Android 设备然后键盘立即出现和消失 我已经找到了一些关于当我按下搜索栏时 android 键盘
  • 如何使用谷歌地图检测一个点是否在多边形内部?

    我想检测到google maps LatLng是在一个里面google maps Polygon 我怎样才能做到这一点 Cheers 你可以使用这个谷歌地图V3 google maps geometry poly containsLocat

随机推荐