如何在Google地图中隐藏群集标记上的数字？ [英] How to hide the numbers on a cluster marker in Google Maps?

问题描述

所以我有这个：

但我想要的是这样的：

I我非常确定应该有一个选项，我可以在这里指定：

  var options = {
 gridSize：80， 
 imagePath：imagePath，
 someOption：iAmMissing ?? 
} 
 var mc = new MarkerClusterer（map，mapmarkers，options）; 
 google.maps.event.addListener（mc，'clusteringend'，function（）{
 setTimeout（fixMyPageOnce，1）; 
}）; 
  

但我似乎无法找到选项。这是正确的地方，还是有另一种方式，我可以摆脱圆圈中的数字？

创建一个自定义的计算器函数，它将返回值的text属性设置为。

  calculator：function（markers，numStyles） {
 var index = 0; 
 var count = markers.length.toString（）; 
 
 var dv = count; 
 while（dv！== 0）{
 dv = parseInt（dv / 10，10）; 
 index ++; 
} 
 
 index = Math.min（index，numStyles）; 
 return {
 text：，
 index：index，
 title：count 
}; 
} 
  

代码段：

  function initialize（）{var center = new google.maps.LatLng（52.4357808，4.991315699999973）; var mapOptions = {zoom：12，center：center，mapTypeId：google.maps.MapTypeId.TERRAIN}; map = new google.maps.Map（document.getElementById（'map-canvas'），mapOptions）; for（i = 0; i  

  html，body，＃map-canvas {width：100％; height：100％;}  

< script src = https://maps.googleapis.com/maps/api/js?libraries=geometry,places&ext=.js\"></script><script src =https://cdn.rawgit.com/ googlemaps / v3-utility-library / master / markerclustererplus / src / markerclusterer.js>< / script>< div id =map-canvas>< / div>

So I have this:

But what I want is this:

I'm pretty sure there should be an option I can specify here:

var options = {
    gridSize: 80,
    imagePath: imagePath ,
    someOption : iAmMissing ??
}
var mc = new MarkerClusterer(map, mapmarkers, options);
google.maps.event.addListener(mc, 'clusteringend', function(){
    setTimeout(fixMyPageOnce, 1);
});

But I can't seem to find an option. Is this the right place or is there another way I can get rid of the numbers in the circles?

解决方案

Create a custom "calculator" function that sets the "text" property of the return value to "".

calculator: function(markers, numStyles) {
  var index = 0;
  var count = markers.length.toString();

  var dv = count;
  while (dv !== 0) {
    dv = parseInt(dv / 10, 10);
    index++;
  }

  index = Math.min(index, numStyles);
  return {
    text: "",
    index: index,
    title: count
  };
}

proof of concept fiddle

code snippet:

function initialize() {
  var center = new google.maps.LatLng(52.4357808, 4.991315699999973);
  var mapOptions = {
    zoom: 12,
    center: center,
    mapTypeId: google.maps.MapTypeId.TERRAIN
  };

  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  for (i = 0; i < markers.length; i++) {
    addMarker(markers[i]);
  }
  markerCluster = new MarkerClusterer(map, gmarkers, {
    imagePath: 'https://cdn.rawgit.com/googlemaps/v3-utility-library/master/markerclustererplus/images/m',
    calculator: function(markers, numStyles) {
      var index = 0;
      var title = "";
      var count = markers.length.toString();

      var dv = count;
      while (dv !== 0) {
        dv = parseInt(dv / 10, 10);
        index++;
      }

      index = Math.min(index, numStyles);
      return {
        text: "",
        index: index,
        title: count
      };
    }
  });
}
var gmarkers = [];
var markers = [];
var infowindow = new google.maps.InfoWindow({
  content: ''
});
var markerCluster;

// Our markers
markers = [
  ['0', 'Title 1', 52.4357808, 4.991315699999973, 'car'],
  ['1', 'Title 2', 52.4357808, 4.981315699999973, 'third'],
  ['2', 'Title 3', 52.4555687, 5.039231599999994, 'car'],
  ['3', 'Title 4', 52.4555687, 5.029231599999994, 'second']
];

function addMarker(marker) {
  var title = marker[1];
  var pos = new google.maps.LatLng(marker[2], marker[3]);
  var content = marker[1];

  var marker = new google.maps.Marker({
    title: title,
    position: pos,
    map: map
  });

  gmarkers.push(marker);

  google.maps.event.addListener(marker, 'click', (function(marker1, content) {
    return function() {
      infowindow.setContent(content);
      infowindow.open(map, marker);
    }
  })(marker, content));
}
google.maps.event.addDomListener(window, "load", initialize);

html,
body,
#map-canvas {
  width: 100%;
  height: 100%;
}

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,places&ext=.js"></script>
<script src="https://cdn.rawgit.com/googlemaps/v3-utility-library/master/markerclustererplus/src/markerclusterer.js"></script>
<div id="map-canvas"></div>

这篇关于如何在Google地图中隐藏群集标记上的数字？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！