使用实时数据对GeoJSON文件中的许多标记进行样式化

一旦对象数量（例如圆形标记图标）达到1k或以上，就会出现这种行为，性能将大幅下降。通常在这种情况下，建议通过画布平铺覆盖来渲染对象。

为此，我们引入一个自定义覆盖，用于显示标记图标

来源：iconsoverlay.js

示例

这是一个类似的示例，演示了如何加载GeoJSON数据并使用自定义图标显示标记：

function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
        center: {
            lat: -30.3647,
            lng: 149.555
        },
        zoom: 4,
        mapTypeId: google.maps.MapTypeId.TERRAIN
    });
   
    
   
    var overlay = new IconsOverlay(map);
    
    //1.load GeoJSON data
    var data = generateData(1000);
    //2.display custom icons
    data.features.forEach(function (f, id) {
        var position = new google.maps.LatLng(f.geometry.coordinates[1], f.geometry.coordinates[0]);
        if (id > 0 && id % 2 == 0) {
            //add circle icon
            var circleIconProperties = {
                id: id,
                path: google.maps.SymbolPath.CIRCLE,
                strokeWeight: 2,
                strokeColor: 'rgba(0, 0, 0, 1)',
                fillColor: 'rgba(160,16,0,0.5)',
                scale: 10
            }
            overlay.addIcon(position, circleIconProperties);
            console.log(id);
        }
        else if (id > 0 && id % 3 == 0) {
            //add path icon
            var pathIconProperties = {
                id: id,
                path: 'm5.219986,29.697235l23.795303,0l0,-25.117241l24.409424,0l0,25.117241l23.795288,0l0,25.765518l-23.795288,0l0,25.117264l-24.409424,0l0,-25.117264l-23.795303,0l0,-25.765518z',
                strokeWeight: 2,
                strokeColor: 'rgba(0, 0, 0, 1)',
                fillColor: 'rgba(160,16,0,0.5)',
                scale: 0.4
            }
            overlay.addIcon(position,pathIconProperties);
        } else {
            var arrowIconProperties = {
                id: id,
                path: google.maps.SymbolPath.BACKWARD_OPEN_ARROW,
                strokeColor: 'rgba(0, 0, 0, 1)',
                fillColor: 'rgba(160,16,0,0.5)',
                fillOpacity: 0.5,
                scale: 4
            }
            overlay.addIcon(position, arrowIconProperties);       
        }     
    });
}

//Helper methods
function generateData(count) {
    var data = {
        "type": "FeatureCollection",
        "features": []
    };
    for (var i = 0; i < count; i++) {
        var lat = getRandomArbitrary(-30.0,-15.0);
        var lng = getRandomArbitrary(120.0,150.0);
        
        data.features.push({
            "type": "Feature",
            "geometry": {
                "type": "Point",
                "coordinates": [lng, lat]
            },
            "properties": {
                "id": i.toString(),
                "lat": lat.toString(),
                "long": lng.toString(),
            }
        });
    }
    return data;
}

function getRandomArbitrary(min, max) {
    return Math.random() * (max - min) + min;
}
function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}
google.maps.event.addDomListener(window, 'load', initMap);

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}
#map {
    height: 100%;
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
    <script type="text/javascript" src="http://rawgit.com/vgrem/6dd435ebacd720f0ad10/raw/4af8287e17c3aea92b50681d0a9061f2b620f70d/iconsoverlay.js"></script> 
<div id="map"></div>

演示页面