使用谷歌地图聚类geojson中的标记

Question

我使用Google Maps Javascript API创建了html页面。此地图显示geojson文件中的标记。一切都很好。我想添加标记聚类。但由于某种原因，这不起作用。我对Javascript不太满意。请告诉我如何更改我的代码。

var map;
function initMap() {

  var styleArray = [
    {
      featureType: 'all',
      stylers: [
        { saturation: -80 }
      ]
    },{
      featureType: 'road.arterial',
      elementType: 'geometry',
      stylers: [
        { hue: '#00ffee' },
        { saturation: 50 }
      ]
    },{
      featureType: 'poi.business',
      elementType: 'labels',
      stylers: [
        { visibility: 'off' }
      ]
    }
  ];

  var mapOptions = {
    zoom: 14,
    center: new google.maps.LatLng(42.34, -71.05),
    styles: styleArray
  };

  var map = new google.maps.Map(document.getElementById('map'),
    mapOptions);


  // Load GeoJSON.
  map.data.loadGeoJson('/map.geojson');

  map.data.setStyle(function(feature) {
    return {icon:feature.getProperty('icon')};
  });

 
  var infoWindow = new google.maps.InfoWindow({
        content: "",
        pixelOffset: new google.maps.Size(0, -40),
        maxWidth: 250
  });

  map.data.addListener('mouseover', function(event) {
    var desc = event.feature.getProperty("description");
    var titl = event.feature.getProperty("address");
    var myadd = event.feature.getProperty("status");
    var myimage = event.feature.getProperty("image");
    var myland = event.feature.getProperty("land");
    var mysize = event.feature.getProperty("size");
    var myunits = event.feature.getProperty("units");
    var myphaze = event.feature.getProperty("permit");
    var contentString = '<div style="width: 94.2%; padding-left:10px; height: 25px;float: left;color: #FFF;background: #0b3061;font-size: 16px;line-height: 25px;border-radius:5px 5px 0px 0px;"><strong><b>' + titl + '</b></strong><br></div><br><div><img src=' + myimage + 'width="100" height="100" hspace="4" vspace="1" align="left"><p align="left"><b>Address: </b>' + myadd + '<br><b>Land Sq. Feet: </b>' + myland + '<br><b>Building Size: </b>' + mysize + '<br><b>Residential Units: </b>' + myunits + '<br><b>Project Phase: </b>' + myphaze + '</p><p align="justify"><b>Project Description: </b>' + desc + '</p></div>';
    infoWindow.setContent(contentString);
 
    var anchor = new google.maps.MVCObject();
    anchor.setValues({ //position of the point
            position: event.latLng,
            anchorPoint: new google.maps.Point(0, -10)
    });

    infoWindow.open(map, anchor);


  });

  var markerCluster = new MarkerClusterer(map, markers);
  

}

Answer 1

在您的示例中，缺少markers数组的初始化，您可能希望从加载的GeoJSON文件中提取标记。如果是，则替换以下行：

map.data.loadGeoJson('/map.geojson');

带

map.data.loadGeoJson('/map.geojson', null, function (features) {

    var markers = features.map(function (feature) {
        var g = feature.getGeometry();
        var marker = new google.maps.Marker({ 'position': g.get(0) });
        return marker;
    });

    var markerCluster = new MarkerClusterer(map, markers,{ imagePath: 'https://cdn.rawgit.com/googlemaps/js-marker-clusterer/gh-pages/images/m' });
});

示例

var map;
function initMap() {

    var styleArray = [
        {
            featureType: 'all',
            stylers: [
                { saturation: -80 }
            ]
        }, {
            featureType: 'road.arterial',
            elementType: 'geometry',
            stylers: [
                { hue: '#00ffee' },
                { saturation: 50 }
            ]
        }, {
            featureType: 'poi.business',
            elementType: 'labels',
            stylers: [
                { visibility: 'off' }
            ]
        }
    ];

    var mapOptions = {
        zoom: 12,
        center: new google.maps.LatLng(6.3088468, 5.6223226),
        styles: styleArray
    };

    var map = new google.maps.Map(document.getElementById('map'),
        mapOptions);




    // Load GeoJSON.
    //map.data.loadGeoJson('https://gist.githubusercontent.com/vgrem/4d6ff14d50f408e864f1ee4614653c1c/raw/schools.geojson');

    map.data.loadGeoJson('https://gist.githubusercontent.com/vgrem/4d6ff14d50f408e864f1ee4614653c1c/raw/schools.geojson', null, function (features) {

        var markers = features.map(function (feature) {
            var g = feature.getGeometry();
            var marker = new google.maps.Marker({ 'position': g.get(0) });
            return marker;
        });

        var markerCluster = new MarkerClusterer(map, markers,{ imagePath: 'https://cdn.rawgit.com/googlemaps/js-marker-clusterer/gh-pages/images/m' });
    });



    map.data.setStyle(function (feature) {
        return { icon: feature.getProperty('icon'), visible: false };
    });



}

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

#map {
    height: 400px;
}

<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://googlemaps.github.io/js-marker-clusterer/src/markerclusterer.js"></script>
<div>
    <div id="map"></div>
 </div>

Answer 2

@Vadim的答案很好，但我花了一段时间才知道如何使用自定义标记图标而不是默认的红色图标

map.data.setStyle(function(feature) {
    return {icon:feature.getProperty('icon')};
});

不起作用 这有效：

    var markers = features.map(function (feature) {
        var g = feature.getGeometry();
        var iconurl = feature.getProperty('icon');
        var marker = new google.maps.Marker({ 
          'position': g.get(0) ,
          'icon': iconurl
        });
        return marker;
    });