javascript - 如何通过在 map 上绘制标记获得更好的性能

Question

我的数据库有近 30.000 条记录，sql 查询获取这些记录，处理时间返回 geoJSON 需要大约 2 秒。

我遇到的问题是在 map 上绘制这些点需要大约 5 秒，这太长了。

这是我获取 geoJSON、绘图和聚类点的代码:

    var map;
    var markerClusterer;

    var options = {
        SUCCESS: {
            icon: '/img/marker/green.png',
            zIndex: 2
        },
        FAIL: {
            icon: '/img/marker/red.png',
            zIndex: 3
        },
        NA: {
            icon: '/img/marker/yellow.png',
            zIndex: 1
        }
    };

    var markerGroups = {
        "SUCCESS": [],
        "FAIL": [],
        "NA": []
    };

    function getJSON(url) {
        var jsPromise = Promise.resolve($.ajax(url));
        return jsPromise.then(JSON.parse);
    }

    function load() {

        var opts = {
            streetViewControl: false,
            tilt: 0,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            center: new google.maps.LatLng(42.879094,-97.381205),
            zoom: 4
        };
        map = new google.maps.Map(document.getElementById("map"), opts);

        markerClusterer = new MarkerClusterer(map);
        markerClusterer.setMaxZoom(15);

        getJSON('/api/maps/points').then(function (json) {
            var markers = json.features;

            for (var i = 0; i < markers.length; i++) {
                var properties = markers[i].properties;
                var type = properties.value;
                var point = new google.maps.LatLng(
                    parseFloat(markers[i].geometry.coordinates[1]),
                    parseFloat(markers[i].geometry.coordinates[0]));
                var marker = createMarker(point, type, map, properties);
            }

            markerClusterer.addMarkers(markerGroups["NA"]);
            markerClusterer.addMarkers(markerGroups["SUCCESS"]);
            markerClusterer.addMarkers(markerGroups["FAIL"]);

        });

    }

    function createMarker(point, type, map, properties) {
        var obj;

        if(!options[type]) obj = options['NA'];
        else obj = options[type];

        var icon = obj.icon;
        var zIndex = obj.zIndex;

        var marker = new google.maps.Marker({
            map: map,
            position: point,
            icon: icon,
            type: type,
            zIndex: parseInt(zIndex)
        });

        if (!markerGroups[type]){
            markerGroups["NA"].push(marker);
        }  else {
            markerGroups[type].push(marker);
        }

        return marker;
    }

    google.maps.event.addDomListener(window, 'load', load);

绘制这些点的最有效方法是什么？目前它绘制了所有点。可以只为边界框绘制点吗？

Answer 1

一些提示

改变你的

      for (var i = 0; i < markers.length; i++) { 

这样可以避免每次都计算长度

      mylen= markers.len 
      for (var i = 0; i < mylen; i++) { 

您可以使用稍微减少绘图时间来简化 latLng 构造

https://developers.google.com/maps/documentation/javascript/examples/map-latlng-literal

您可以存储在 json 中并直接传递对象，避免由于 latLng 计算而产生的开销。

另一个策略是减少渲染的点数量，仅搜索 map 范围内的点。如果您已将点保存在数据库中，这很容易。

您还可以仅以特定的缩放比例显示该点...