Question

我正在开发一个基于Google Maps API的应用程序：基本上我有我国家的邮政编码，我需要展示它们。

这是一段显示我当前实施的视频 - ＆gt; https://vid.me/S6PL

地图上的邮政编码是通过我扩展的google.maps.OverlayView课程创建的，并创建了自定义PostalCodeOverlay（由圆圈表示）。它的draw方法如下：

PostalCodeOverlay.prototype.draw = function() {

        var overlayProjection = this.getProjection();
        // Handle some positioning stuff here with some properties created before during construction
        var center = overlayProjection.fromLatLngToDivPixel(new google.maps.LatLng(this.centerLat, this.centerLng));
        var div = this.postalCodeOverlayDiv;
        div.style.position = 'absolute';
        div.style.left = (center.x - (width/2)) + 'px';
        div.style.top = (center.y - (height/2)) + 'px';
        div.style["-moz-border-radius"] = "50%";
        div.style["-webkit-border-radius"] = "50%";
        div.style["border-radius"] = "50%";
        // As I show it the first time with an animation and
        // the APIs call this method several times (e.g. when
        // the zoom level of the map changes), I have a custom
        // boolean property that tells me whether it's the first
        // time or not
        if (!this.justCreated) {        
            div.style.width = width + "px";
            div.style.height = height + "px";
        }
        else {
            this.justCreated = false;
            var $postalCodeOverlayDiv = $(div); // here I get a jQuery reference to the div which represents the overlay (the circle).
            $postalCodeOverlayDiv.css({
                "width": "0",
                "height": "0",
                "opacity": "0"
            });
            // Animate it a bit so that it looks nicer when it
            // is drawn the first time.
            $postalCodeOverlayDiv.animate({
                "opacity": "1",
                "width": width + "px",
                "height": height + "px"
            }, 500);

        }
};

现在，正如您从视频中看到的那样，当缩放级别较高时，圆圈会平滑创建，导致每个视口边界的邮政编码密度较低。

但是，当我开始缩小时，您可以看到这些漂亮的效果会丢失，因为现在每个视口边界的邮政编码更多（区域变得更宽）。

我通过AJAX从数据库中获取邮政编码（由于我的数据库本地存在Google Geocoding API，我将其缓存）。在更改边界时（我使用map.addListener('bounds_changed', function() {...})）获取它们的查询很快并且在请求发出后立即返回。返回的JSON包含搜索的特定边界内的所有邮政编码，当用户在地图中移动时计算（从视频中可以看到）。然后，我迭代这个JSON，并为每个条目（代表邮政编码），我创建一个new PostalCodeOverlay(...params...)与相关信息。

你已经理解的问题是渲染：当渲染成千上万的元素时，JavaScript引擎缺少一点而地图会挂起。

我可以发布代码，但我不认为这里需要它，我认为它足以向您展示我使用的视频和叠加层（无论如何，如果有什么不是＆＃39 ;清楚，拜托，告诉我，我会更新）。

解决此类问题的最佳方法是什么？当底层数据集更大时，有没有办法告诉JavaScript / jQuery更顺畅地处理动画？或者可能有一些我不知道的谷歌地图功能，我可以在我创建的叠加层中利用它们？

无论如何，一些建议将不胜感激。

感谢您的关注。

Answer 1

Google在Too Many Markers上提供此文档以提供建议。有很多选择可以考虑。

如果在视图中绘制了数百个元素，您还希望摆脱jQuery动画。 jQuery动画在计时器上涉及数千个绘图周期。乘以数百或数千个元素，它比CPU更能有效地跟上。您还可以尝试使用CSS动画而不是jQuery动画，这些动画可能更有效。

因此，如果缩放级别超过某个阈值（因此可能使邮件代码丢失的可能性在视图中），则跳过动画并直接设置CSS属性。

除此之外，您可以通过删除边框半径或简化其他一些CSS样式来查看绘制邮政编码的更有效方法（您不会显示显示该div所涉及的所有内容，因此我们可以＆＃39 ; t提出更具体的建议）。同样，只有当缩小超过某个阈值时，才能执行此操作。

并且，对于您经常缩小的情况，您可能希望跳过重叠代码的渲染，因为它们都非常小而且非常靠近以至于它们不能提供大量的代码。无论如何。这里的挑战是弄清楚如何在保持整体CPU的同时做到这一点。您只能在给定的屏幕细分中显示一个邮政编码，或者在缩小超出某个阈值时不显示邮政编码。

我可以使用JavaScript jQuery改进数千个元素的渲染吗？

1 个答案: