Google Maps Javascript API-google.maps.Data图层和markercluster

Question

是否有人尝试在google.maps.Data层上实现markercluster？ 我可以使用google.maps.Data成功在地图上添加GeoJSON数据。 但是我该如何在这里在图层上的标记簇中输入图像描述呢？

   See the code to ad Data Layer:
    //Google map
        map = new google.maps.Map(document.getElementById("map_canvas"),
                    mapOptions);
    ....
//handleResults use GeoJSON request, OK
         function handleResults(output) {

        layerTH = new google.maps.Data();

//Add the Data Layer with GeoJSON datas : OK
        layerTH.addGeoJson(output, { idPropertyName: 'ID_POI' }); 

//Add a syle on the Data Layer : OK             
        layerTH.setStyle(function(feature) {
            var type = feature.getProperty('CLASSEMENT');       

            var icon = (ascii == 'inscrit') ? 'http://maps.google.com/mapfiles/ms/icons/blue-dot.png' : 'http://maps.google.com/mapfiles/ms/icons/green-dot.png';       
            return {
                 icon: icon           
            };
        });

        layerTH.setMap(map);

一切都OK，我可以在图层上查看数据。

Answer 1

哇，我简直不敢相信这个问题甚至都没有发表评论或投票否决...您可能已经找到了解决方法，或者放弃了使用数据层的操作，但是由于我遇到了同样的问题，我花了很长时间才找到一个解决这个问题的方法，也许对任何发现这篇文章的人都会有用。

您可以使用https://github.com/Connum/data-layer-clusterer ，我对其进行了增强以使其也适用于LineString和Polygon功能。

这是一个工作示例：

 window.initMap = function() { map = new google.maps.Map(document.getElementById('map'), { center: {lat: 49.0192242, lng: 8.4051448}, zoom: 13, scaleControl: false, streetViewControl: false, rotateControl: false, }); var s = document.createElement( 'script' ); s.setAttribute( 'src', 'https://cdn.rawgit.com/Connum/data-layer-clusterer/master/src/datalayerclusterer.js' ); s.async = false; document.head.appendChild( s ); s.onload = function() { var cluster = new DataLayerClusterer({ "map": map }); cluster.addGeoJson({ "type": "FeatureCollection", "features": [ { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ 8.404455900017638, 49.013533476349956 ] } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ 8.401044130150694, 49.01396272155595 ] } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ 8.400035619561095, 49.01183053267183 ] } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ 8.40565752965631, 49.01064125233564 ] } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ 8.402932405297179, 49.01073977367939 ] } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ 8.403726339165587, 49.01247793961102 ] } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ 8.404820680443663, 49.01244275466763 ] } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ 8.404724120919127, 49.01104237373055 ] } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ 8.403586864296813, 49.011105708392215 ] } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ 8.409692287095822, 49.012400532702735 ] } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ 8.411816596635617, 49.014638247499114 ] } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ 8.409027099260129, 49.017537275583216 ] } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ 8.398555755265988, 49.01670698867642 ] } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ 8.396946429857053, 49.0123160886655 ] } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ 8.39379215205554, 49.00865670946874 ] } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ 8.411065578111447, 49.00868485956599 ] } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ 8.413211345323361, 49.01026123961204 ] } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ 8.400143623002805, 49.007558843262004 ] } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ 8.400422572740354, 49.00857225908148 ] } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ 8.403812884935178, 49.007882575557474 ] } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ 8.407074451097287, 49.007404014028836 ] } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ 8.407546519883908, 49.00957157948308 ] } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ 8.407310485490598, 49.013976795106586 ] } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ 8.40351247752551, 49.017354332200135 ] } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ 8.404177665361203, 49.019043014809284 ] } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ 8.402332305558957, 49.01567966536862 ] } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ 8.397225379594602, 49.015496715158264 ] } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ 8.393341540941037, 49.01674920698892 ] } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ 8.39402818644885, 49.01396272155595 ] } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ 8.39276218379382, 49.01209090386598 ] } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ 8.395551681169309, 49.011443491893736 ] } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ 8.39874887431506, 49.0145256604785 ] } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ 8.402203559526242, 49.01627073068373 ] } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ 8.408447742112912, 49.016692915897615 ] } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ 8.409306048997678, 49.0153278374442 ] } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ 8.415936469682492, 49.01649589657675 ] } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ 8.415357112535276, 49.012766455208926 ] } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ 8.41200971568469, 49.01306200603891 ] } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ 8.410357474931516, 49.011654605418435 ] } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ 8.407396316179074, 49.01235831070202 ] } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ 8.410293101915158, 49.01456788064106 ] } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ 8.40773963893298, 49.01587668792012 ] } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ 8.405186175950803, 49.01569373843385 ] } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ 8.404306411393918, 49.01508859303522 ] } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ 8.403319358476438, 49.01711509753079 ] } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ 8.400486945756711, 49.018578632802985 ] } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ 8.398040771135129, 49.018409765544675 ] } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ 8.395895003923215, 49.01842383783808 ] } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ 8.395830630906858, 49.017058806853235 ] } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ 8.395422935136594, 49.01586261490659 ] } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ 8.396324157365598, 49.013807912236224 ] } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ 8.399542808183469, 49.01334348138857 ] } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ 8.401259421953, 49.01332940765888 ] } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ 8.398469924577512, 49.01033161255747 ] } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ 8.396731853135861, 49.01048643268729 ] } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ 8.39701080287341, 49.00864263441412 ] } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ 8.394135474809445, 49.008389282751025 ] } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ 8.392955302842893, 49.01043013451395 ] } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ 8.396152495988645, 49.0076714460383 ] } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ 8.409713744767942, 49.00689729680877 ] } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ 8.412074088701047, 49.0073617877908 ] } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ 8.401259421953, 49.006489104187075 ] } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ 8.424090385087766, 49.01138719480263 ] } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ 8.421644210466184, 49.01417382439788 ] } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ 8.418425559648313, 49.016692915897615 ] } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ 8.41848993266467, 49.017452840259196 ] } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ 8.419884681352414, 49.01233016268164 ] } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ 8.417266845353879, 49.01024716501104 ] } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ 8.414949416765012, 49.00891005977109 ] } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ 8.41548585856799, 49.00754476789709 ] } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ 8.425055980333127, 49.00778404855994 ] } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ 8.42400455439929, 49.01266793787567 ] } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ 8.421322345384397, 49.00872708468202 ] } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ 8.419906139024533, 49.00692544790073 ] } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ 8.418447017320432, 49.00776997325865 ] } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ 8.417803287156858, 49.01261164216915 ] } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ 8.416365623124875, 49.016186293211256 ] } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ 8.4132542606676, 49.01772021829393 ] } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ 8.411816596635617, 49.017072879528584 ] } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ 8.41151618922595, 49.01614407442129 ] } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ 8.413425922044553, 49.01358273418453 ] } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ 8.39201116526965, 49.018466054694436 ] } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ 8.390830993303098, 49.01575003065509 ] } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ 8.388749599107541, 49.017143242845684 ] } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ 8.38954353297595, 49.0135123658345 ] } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ 8.389693736680783, 49.01230201464536 ] } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ 8.389350413926877, 49.01059902884291 ] } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ 8.389672279008664, 49.00931823254672 ] } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ 8.39078807795886, 49.00789665082693 ] } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ 8.392354488023557, 49.007178807012075 ] } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ 8.397461413987912, 49.00696767450883 ] } }, { "type": "Feature", "geometry": { "type": "Polygon", "coordinates": [ [ [ 8.399607181199826, 49.01534191060892 ], [ 8.399907588609494, 49.01462417413546 ], [ 8.400615691789426, 49.01448344028011 ], [ 8.401087760576047, 49.01470861425769 ], [ 8.401109218248166, 49.01489156736447 ], [ 8.40050840342883, 49.01529969110284 ], [ 8.400486945756711, 49.015947052928105 ], [ 8.399607181199826, 49.01534191060892 ] ] ] } }, { "type": "Feature", "geometry": { "type": "Polygon", "coordinates": [ [ [ 8.404563903459348, 49.017143242845684 ], [ 8.404220580705442, 49.01641145948622 ], [ 8.40449953044299, 49.016073709691824 ], [ 8.4057440754259, 49.01614407442129 ], [ 8.405593871721067, 49.01710102486738 ], [ 8.40527200663928, 49.01691807988091 ], [ 8.404885768541135, 49.01700251611205 ], [ 8.404885768541135, 49.017255823946115 ], [ 8.404563903459348, 49.017143242845684 ] ] ] } }, { "type": "Feature", "geometry": { "type": "Polygon", "coordinates": [ [ [ 8.41321277548559, 49.00502521347455 ], [ 8.412912368075922, 49.00454662448421 ], [ 8.41943550040014, 49.002829296715134 ], [ 8.421752928989008, 49.000745901563036 ], [ 8.423169135348871, 49.0011682184338 ], [ 8.42419910361059, 49.002688529517854 ], [ 8.41321277548559, 49.00502521347455 ] ] ] } }, { "type": "Feature", "geometry": { "type": "LineString", "coordinates": [ [ 8.387935637729242, 49.01496193376498 ] ] } }, { "type": "Feature", "geometry": { "type": "LineString", "coordinates": [ [ 8.387420653598383, 49.01051458175004 ], [ 8.38797855307348, 49.01499008029734 ], [ 8.38849353720434, 49.016932152596056 ], [ 8.38948059012182, 49.01873342728651 ], [ 8.391798018710688, 49.02092864268258 ], [ 8.394544600741938, 49.02247649276904 ], [ 8.397162436740473, 49.023461463214126 ], [ 8.400381087558344, 49.02413686025233 ], [ 8.402655600802973, 49.02436199056141 ], [ 8.406260489718989, 49.02419314292509 ], [ 8.410079955356196, 49.02323632883109 ], [ 8.412096976535395, 49.022392065823794 ], [ 8.414414405124262, 49.02081606988936 ], [ 8.41673183371313, 49.019043014809284 ], [ 8.418105124728754, 49.016481823738275 ], [ 8.418276786105707, 49.01403308926939 ], [ 8.418105124728754, 49.011274600429445 ], [ 8.417547225253657, 49.00967010294351 ], [ 8.417289733188227, 49.008881909801154 ], [ 8.387420653598383, 49.01051458175004 ] ] } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ 8.399053572211415, 49.02233578111405 ] } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ 8.399311064276844, 49.02593787420766 ] } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ 8.39467620709911, 49.02886438286371 ] } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ 8.393732069525868, 49.02357403002371 ] } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ 8.387294767890126, 49.023011193429554 ] } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ 8.387809752020985, 49.02661323763608 ] } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ 8.406005857978016, 49.025375064348665 ] } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ 8.41639137128368, 49.022898625346855 ] } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ 8.403001783881336, 49.02092864268258 ] } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ 8.39793777326122, 49.02295490942005 ] } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ 8.409868238959461, 49.02216692660292 ] } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ 8.424030302558094, 49.02441827297955 ] } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ 8.426433561835438, 49.02644439763833 ] } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ 8.428236006293446, 49.023011193429554 ] } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ 8.418708799872547, 49.0211537875052 ] } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ 8.417764662299305, 49.022898625346855 ] } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ 8.424030302558094, 49.0204220631079 ] } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ 8.428750990424305, 49.01591890693685 ] } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ 8.43312835553661, 49.019465176509826 ] } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ 8.435703276190907, 49.02087235631782 ] } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ 8.424802778754383, 49.01907115903407 ] } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ 8.387552259955555, 49.0211537875052 ] } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ 8.38120078900829, 49.0172136060633 ] } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ 8.38145828107372, 49.01597519890346 ] } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ 8.385234831366688, 49.016481823738275 ] } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ 8.38368987897411, 49.02087235631782 ] } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ 8.384033201728016, 49.019746615654235 ] } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ 8.383604048285633, 49.0249248118783 ] } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ 8.3859214768745, 49.02644439763833 ] } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ 8.423171995673329, 49.01839569324728 ] } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ 8.419481276068836, 49.021604074094846 ] } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ 8.408237455878407, 49.021604074094846 ] } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ 8.39665031293407, 49.020984928983715 ] } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ 8.387723921332508, 49.022673488417595 ] } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ 8.390813826117665, 49.02199807151889 ] } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ 8.390899656806141, 49.02644439763833 ] } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ 8.40566253522411, 49.0284141619659 ] } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ 8.40214347699657, 49.02593787420766 ] } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ 8.401199339423329, 49.0291457688561 ] } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ 8.41115569928661, 49.02706347482933 ] } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ 8.41415977338329, 49.02441827297955 ] } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ 8.409181593451649, 49.02633183732152 ] } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ 8.418107985053211, 49.02756998680219 ] } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ 8.421197889838368, 49.02520622014968 ] } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ 8.415189741645008, 49.027119754192036 ] } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ 8.416992186103016, 49.02610671592411 ] } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ 8.384462355170399, 49.01394864800132 ] } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ 8.385320662055165, 49.01254127244647 ] } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ 8.424974440131336, 49.01681957076354 ] } } ] }); } } var s = document.createElement( 'script' ); s.setAttribute( 'src', 'https://maps.googleapis.com/maps/api/js?v=3&callback=initMap' ); s.async = false; document.head.appendChild( s ); 

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

 <div id="map"></div>