【问题标题】:Google Maps JavaScript API v3 / Data Layer / MarkerClustererGoogle Maps JavaScript API v3 / 数据层 / MarkerClusterer
【发布时间】:2014-10-05 16:34:12
【问题描述】:

你能帮我用 MarkerClustererPlus 创建标记集群吗? 我加载数据:

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

并且标记是可见的,但我不知道如何创建标记簇。 我是否必须将 data.geojson 文件解析为数组?谢谢。

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);

这是我的 GeoJson-File 的一个片段(这个片段和整个文件由 GeoJSONLint 测试。

{
"type": "FeatureCollection",
"icon": "resources/icon.png",
"features": [
{
"type": "Feature","properties": {"name":"Bielefeld"},
"geometry": {"type": "Point","coordinates":[8.528849, 52.030656]}
},
{
"type": "Feature","properties": {"name":"Herford"},
"geometry": {"type": "Point","coordinates":[8.676780, 52.118003]}
},
{
"type": "Feature","properties": {"name":"Guetersloh"},
"geometry": {"type": "Point","coordinates":[8.383353, 51.902917]}
}
]
}

【问题讨论】:

标签: javascript google-maps google-maps-api-3 markerclusterer


【解决方案1】:
  1. 创建一个 MarkerClusterer 来管理标记。

    var markerClusterer = new MarkerClusterer();
    
  2. 当数据层触发addfeature 事件时,添加每个标记。

    markerClusterer.addMarker(marker);
    
  3. 隐藏数据层标记。

    map.data.setMap(null);
    

working jsfiddle

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();
    });
}

代码 sn-p:

var geoJson = {
  "type": "FeatureCollection",
  "features": [{
    "type": "Feature",
    "properties": {
      "name": "Bielefeld"
    },
    "geometry": {
      "type": "Point",
      "coordinates": [8.528849, 52.030656]
    }
  }, {
    "type": "Feature",
    "properties": {
      "name": "Herford"
    },
    "geometry": {
      "type": "Point",
      "coordinates": [8.676780, 52.118003]
    }
  }, {
    "type": "Feature",
    "properties": {
      "name": "Guetersloh"
    },
    "geometry": {
      "type": "Point",
      "coordinates": [8.383353, 51.902917]
    }
  }, {
    "type": "Feature",
    "properties": {
      "name": "Guetersloh2"
    },
    "geometry": {
      "type": "Point",
      "coordinates": [8.38, 51.9]
    }
  }]
};
var map = null;
var bounds = new google.maps.LatLngBounds();

var boxText = document.createElement("div");
boxText.style.cssText = "border: 1px solid black; margin-top: 8px; background: yellow; padding: 5px;";
var infobox = new InfoBox({
  content: boxText,
  disableAutoPan: false,
  maxWidth: 0,
  pixelOffset: new google.maps.Size(-140, 0),
  zIndex: null,
  boxStyle: {
    background: "url('tipbox.gif') no-repeat",
    opacity: 0.75,
    width: "280px"
  },
  closeBoxMargin: "10px 2px 2px 2px",
  closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif",
  infoBoxClearance: new google.maps.Size(1, 1),
  isHidden: false,
  pane: "floatPane",
  enableEventPropagation: false
});

var markerClusterer = new MarkerClusterer(null, null, {
  imagePath: "https://cdn.rawgit.com/googlemaps/v3-utility-library/master/markerclustererplus/images/m"
});

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
      });
      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();
  });
}
google.maps.event.addDomListener(window, 'load', initialize);
#map {
  width: 500px;
  height: 500px;
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://cdn.rawgit.com/googlemaps/v3-utility-library/master/infobox/src/infobox.js"></script>
<script src="https://cdn.rawgit.com/googlemaps/v3-utility-library/master/markerclustererplus/src/markerclusterer.js"></script>
<div id="map"></div>

【讨论】:

    【解决方案2】:

    相当老的问题,但不再需要绕道添加常规标记并从数据层中清除它们(特别是如果您需要稍后在编辑地图后再次将地图内容作为 GeoJSON 获取)。

    您可以使用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;
    }
    &lt;div id="map"&gt;&lt;/div&gt;

    【讨论】:

      【解决方案3】:

      无法通过 API 访问为数据层创建的形状,但您必须具有对标记的引用才能将它们添加到集群器中。

      可能的解决方案:

      观察数据的addfeature-事件并创建自己的标记。为数据层创建的标记隐藏(通过 visible 样式设置为 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);
        }
       });
      

      演示:http://jsfiddle.net/doktormolle/myuua77p/

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

      【讨论】:

        猜你喜欢
        • 2011-07-19
        • 2013-06-21
        • 2011-06-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2014-05-07
        • 2015-01-12
        • 2012-05-11
        相关资源
        最近更新 更多