Gmaps API - 许多带有图标和标签的标记在移动设备上加载缓慢

Posted 2023-05-07

【中文标题】Gmaps API - 许多带有图标和标签的标记在移动设备上加载缓慢

【英文标题】：Gmaps API - Many markers with icon & label load slow on mobile

【发布时间】：2018-01-12 11:06:48

【问题描述】：

我正在使用Google Maps API 来显示许多标记（数千个）。如果我不向标记添加自定义标签和图标（几秒钟），加载这些标记可以正常工作，但是当我向标记添加自定义标签和图标时，它们在手机上的加载速度非常慢（在 android 上约为 25 秒）。我创建了一个 codepen 来说明这个问题：https://codepen.io/anon/pen/qXqpjN 在这个 codepen 中，随机生成了 5000 个标记。当您打开此代码笔时，它在计算机上加载速度很快，但在手机上加载速度很慢。我使用以下代码来创建每个标记：

var marker = new google.maps.Marker(
    position: myLatLng,
    label: 
        color: '#000000',
        fontWeight: 'bold',
        text: 'text',
    ,
    icon: 
        labelOrigin: new google.maps.Point(24, 14),
        url: 'http://reistip.nl/assets/img/gmap/icon/emoticons/icongreenbigprice.png',
        size: new google.maps.Size(50, 60),
        origin: new google.maps.Point(0, 0),
        anchor: new google.maps.Point(11, 40),
    ,

);

如果我将上面的代码替换为下面的代码（没有自定义标签和图标的标记），它将加载正常：

    var marker = new google.maps.Marker(
        position: myLatLng,
        title: 'Hello World!'
    );

如何在手机上快速加载具有自定义标签和图标的标记？

【参考方案1】：

您有两个选择：聚类和距离。

聚类：将数据与一些算法一起聚类，当用户放大和缩小时，您只显示聚类的单个点或全部。 距离：使用空间算法（如 KD 树）以便仅快速选择地图当前中心附近的标记。

在移动设备上，您通常可以显示 100/200 个标记，仅此而已。

【讨论】：

感谢您的建议。我实际上已经在使用集群库（markerclustererplus）来集群标记。只要我不向标记添加自定义标签/图标，在手机上显示 5000~ 标记实际上就可以了。您或其他人是否知道为什么向标记添加标签/图标会对标记在手机上的加载速度产生如此重大的影响？

您应该发布您的代码。如果您使用 UI 线程执行加载位图等繁重的处理，通常会发生这种情况。

是的，我已经创建了一个代码笔：codepen.io/anon/pen/qXqpjN，它说明了这个问题，有什么提示可以优化代码以缩短手机上标记的加载时间吗？

【参考方案2】：

我建议三种方式：

1.使用聚类

https://developers.google.com/maps/documentation/javascript/marker-clustering

2。使用融合表

https://support.google.com/fusiontables/answer/1244603?hl=en

3.使用地理服务器： http://geoserver.org/

第 1 步：安装地理服务器

第 2 步：使用您的数据创建一个图层并发布为 WMS

第三步：在谷歌地图上加载图层（WMS）