Google Maps JavaScript API v3/Data Layer/MarkerClusterer

你能帮我用MarkerClustererPlus创建marker集群吗。 我用以下内容加载数据：

layer = map.data.loadGeoJson('resources/data.geojson');

标记是可见的，但我不知道如何创建markercluster。 我是否必须将data.geojson-file解析为数组？谢谢

function initialize() {
map = new google.maps.Map(document.getElementById('map'), mapOptions);
layer = map.data.loadGeoJson('resources/data.geojson');

map.data.setStyle({icon: icon});

map.data.addListener('click', function(event) {
var myHTML = event.feature.getProperty('name');
infobox.setContent("<div style='width:150px; text-align: center;'>"+myHTML+"</div>");
infobox.setPosition(event.feature.getGeometry().get());
infobox.setOptions({pixelOffset: new google.maps.Size(0,0)});
infobox.open(map);
});  

google.maps.event.addListener(map, "click", function(){
infobox.close();
});

map.mapTypes.set('map_style', styledMap);
map.setMapTypeId('map_style');
}
google.maps.event.addDomListener(window, 'load', initialize);

---

为数据层创建的形状无法通过API访问，但必须具有对标记的引用才能将其添加到clusterer

可能的解决办法：

观察数据的

addfeature

-事件并创建自己的标记。为数据层创建的标记将隐藏（通过设置为false的

可见
-样式，或在以后不需要访问该功能时完全删除该功能）

例如：

 var mc=new MarkerClusterer(map);

 map.data.addListener('addfeature',function(e){
  var geo=  e.feature.getGeometry();

  if(geo.getType()==='Point'){

    mc.addMarker(new google.maps.Marker({position:geo.get(),
                                         title   :e.feature.getProperty('name')}));
    map.data.remove(e.feature);
  }
 });

演示：

当然，这个解决方案会产生一些开销。当FeatureCollection中只有点时，最好自己解析geoJSON，而不是使用数据层

创建MarkerClusterer以管理标记

var markerClusterer = new MarkerClusterer();


当数据层触发
addfeature
事件时，向其添加每个标记

markerClusterer.addMarker(marker);


隐藏数据层标记

map.data.setMap(null);




这是一个很老的问题，但不再需要绕道添加常规标记并将其从数据层清除（特别是如果您以后需要在编辑地图后再次将地图内容作为GeoJSON）

您可以使用，我刚刚对其进行了增强，使其也适用于线串和多边形功能

下面是一个工作示例：
window.initMap=function（）{
map=new google.maps.map（document.getElementById（'map'）{
中心：{lat:49.0192242，lng:8.4051448}，
缩放：13，
scaleControl:false，
街景控制：错误，
旋转控制：错误，
});
var s=document.createElement（'script'）；
s、 setAttribute（'src'，'https://cdn.rawgit.com/Connum/data-layer-clusterer/master/src/datalayerclusterer.js' );
s、 异步=假；
文件。标题。附录子项；
s、 onload=函数（）{
var cluster=新的DataLayerCluster({
“地图”：地图
});
cluster.addGeoJson({
“类型”：“FeatureCollection”，
“特点”：[
{
“类型”：“功能”，
“几何学”：{
“类型”：“点”，
“坐标”：[
8.404455900017638,
49.013533476349956
]
}
},
{
“类型”：“功能”，
“几何学”：{
“类型”：“点”，
“坐标”：[
8.401044130150694,
49.01396272155595
]
}
},
{
“类型”：“功能”，
“几何学”：{
“类型”：“点”，
“坐标”：[
8.400035619561095,
49.01183053267183
]
}
},
{
“类型”：“功能”，
“几何学”：{
“类型”：“点”，
“坐标”：[
8.40565752965631,
49.01064125233564
]
}
},
{
“类型”：“功能”，
“几何学”：{
“类型”：“点”，
“坐标”：[
8.402932405297179,
49.01073977367939
]
}
},
{
“类型”：“功能”，
“几何学”：{
“类型”：“点”，
“坐标”：[
8.403726339165587,
49.01247793961102
]
}
},
{
“类型”：“功能”，
“几何学”：{
“类型”：“点”，
“坐标”：[
8.404820680443663,
49.01244275466763
]
}
},
{
“类型”：“功能”，
“几何学”：{
“类型”：“点”，
“坐标”：[
8.404724120919127,
49.01104237373055
]
}
},
{
“类型”：“功能”，
“几何学”：{
“类型”：“点”，
“坐标”：[
8.403586864296813,
49.011105708392215
]
}
},
{
“类型”：“功能”，
“几何学”：{
“类型”：“点”，
“坐标”：[
8.409692287095822,
49.012400532702735
]
}
},
{
“类型”：“功能”，
“几何学”：{
“类型”：“点”，
“坐标”：[
8.411816596635617,
49.014638247499114
]
}
},
{
“类型”：“功能”，
“几何学”：{
“类型”：“点”，
“坐标”：[
8.409027099260129,
49.017537275583216
]
}
},
{
“类型”：“功能”，
“几何学”：{
“类型”：“点”，
“坐标”：[
8.398555755265988,
49.01670698867642
]
}
},
{
“类型”：“功能”，
“几何学”：{
“类型”：“点”，
“坐标”：[
8.396946429857053,
49.0123160886655
]
}
},
{
“类型”：“功能”，
“几何学”：{
“类型”：“点”，
“坐标”：[
8.39379215205554,
49.00865670946874
]
}
},
{
“类型”：“功能”，
“几何学”：{
“类型”：“点”，
“坐标”：[
8.411065578111447,
49.00868485956599
]
}
},
{
“类型”：“功能”，
“几何学”：{
“类型”：“点”，
“坐标”：[
8.413211345323361,
49.01026123961204
]
}
},
{
“类型”：“功能”，
“几何学”：{
“类型”：“点”，
“坐标”：[
8.400143623002805,
49.007558843262004
]
}
},
{
“类型”：“功能”，
“几何学”：{
“类型”：“点”，
“坐标”：[
8.400422572740354,
49.00857225908148
]
}
},
{
“类型”：“功能”，
“几何学”：{
“类型”：“点”，
“坐标”：[
8.403812884935178,
49.007882575557474
]
}
},
{
“类型”：“功能”，
“几何学”：{
“类型”：“点”，
“坐标”：[
8.407074451097287,
49.007404014028836
]
}
},
{
“类型”：“功能”，
“几何学”：{
“类型”：“点”，
“坐标”：[
8.407546519883908,
49.00957157948308
]
}
},
{
“类型”：“功能”，
“几何学”：{
“类型”：“点”，
“坐标”：[
8.407310485490598,
49.013976795106586
]
}
},
{
“类型”：“功能”，
“几何学”：{
“类型”：“点”，
“坐标”：[
8.40351247752551,
49.017354332200135
]
}
},
{
“类型”：“功能”，
“几何学”：{
“类型”：“点”，
“坐标”：[
8.404177665361203,
49.019043014809284
]
}
},
{
“类型”：“功能”，
“几何学”：{
“类型”：“点”，
“坐标”：[
8.402332305558957,
49.01567966536862
]
}
},
{
“类型”：“功能”，
“几何学”：{
“类型”：“点”，
“坐标”：[
8.397225379594602,
49.015496715158264
]
}
},
{
“类型”：“功能”，
“几何学”：{
“类型”：“点”，
“坐标”：[
8.393341540941037,
49.01674920698892
]
}
},
{
“类型”：“功能”，
“几何学”：{
“类型”：“点”，
“坐标”：[
8.39402818644885,
49.01396272155595
]
}
},
{
“类型”：“功能”，
“几何学”：{
“类型”：“点”，
“坐标”：[
8.39276218379382,
49.01209090386598
]
}
},
{
“类型”：“功能”，
“几何学”：{
“类型”：“点”，
“坐标”：[
8.395551681169309,
49.011443491893736
]
}
map.data.setMap(null);

var markerClusterer = new MarkerClusterer();
function initialize() {
    var mapOptions = {
        center: new google.maps.LatLng(52, 8),
        zoom: 4
    };
    map = new google.maps.Map(document.getElementById('map'), mapOptions);

    markerClusterer.setMap(map);
    google.maps.event.addListener(map.data, 'addfeature', function (e) {
        if (e.feature.getGeometry().getType() === 'Point') {
            var marker = new google.maps.Marker({
                position: e.feature.getGeometry().get(),
                title: e.feature.getProperty('name'),
                map: map
            });
            // open the infoBox when the marker is clicked
            google.maps.event.addListener(marker, 'click', function (marker, e) {
                return function () {

                    var myHTML = e.feature.getProperty('name');
                    boxText.innerHTML = "<div style='text-align: center;'><b>" + myHTML + "</b></div>";
                    infobox.setPosition(e.feature.getGeometry().get());
                    infobox.setOptions({
                        pixelOffset: new google.maps.Size(0, 0)
                    });
                    infobox.open(map);
                };
            }(marker, e));
            markerClusterer.addMarker(marker);
            bounds.extend(e.feature.getGeometry().get());
            map.fitBounds(bounds);
            map.setCenter(e.feature.getGeometry().get());
        }
    });
    layer = map.data.addGeoJson(geoJson);
    map.data.setMap(null);
    google.maps.event.addListener(map, "click", function () {
        infobox.close();
    });
}