谷歌地图：在标记中放置数字？答案

【问题标题】：Google maps: place number in marker?谷歌地图：在标记中放置数字？
【发布时间】：2011-02-22 20:33:45
【问题描述】：

如何在谷歌地图的标记中显示数字？我想做服务器端集群，我需要显示集群代表多少点。

【问题讨论】：

请参考stackoverflow.com/a/37582234/3553665
集群默认显示点数

标签： javascript google-maps gis google-maps-markers

【解决方案1】：

最简单的解决方案：

marker = new google.maps.Marker({
  position: my_position,
  map: map,
  label: num_events+'' //Needs to be a string. No integers allowed
});

见https://developers.google.com/maps/documentation/javascript/examples/marker-labels

有关对标记布局的更多控制，请参阅Valery Viktorovsky's answer

【讨论】：

【解决方案2】：

最好的解决方案是通过 url 将远程或本地图像和文本传递给服务器端脚本。绘制标记时，您将使用此 url 作为图标的值，并且服务器端脚本返回您提供的图像的副本（请注意不要保存在服务器上），并将文本烘焙到图像中。因此，您可以在自定义标记图像上实时渲染数字或文本，因为您将它们拖放到地图上。

这是我的博客上的教程，介绍了如何做到这一点。 - http://www.devinrolsen.com/google-maps-marker-icons-with-numbers-using-php-gd/

【讨论】：

虽然这在理论上可以回答这个问题，it would be preferable 在此处包含答案的基本部分，并提供链接以供参考。

【解决方案3】：

最新的 google js API 有 google.maps.MarkerLabel 对象。

因此您可以轻松设置标签的文本/样式

var mIcon = {
  path: google.maps.SymbolPath.CIRCLE,
  fillOpacity: 1,
  fillColor: '#fff',
  strokeOpacity: 1,
  strokeWeight: 1,
  strokeColor: '#333',
  scale: 12
};

var gMarker = new google.maps.Marker({
  map: gmap,
  position: latLng,
  title: 'Number 123',
  icon: mIcon,
  label: {color: '#000', fontSize: '12px', fontWeight: '600',
    text: '123'}
});

jsfiddle

【讨论】：

如果这些点彼此非常接近，由于某种原因，数字会显示在彼此的顶部。（而不是只显示一个或另一个，其他“堆叠”在后面） - 图标文本层是所有图标背景之上的层。

【解决方案4】：

以下是具有更新“视觉刷新”样式的自定义图标，您可以通过简单的 .vbs 脚本快速生成这些图标。我还包括一个大型预生成集，您可以立即使用它并使用多种颜色选项：https://github.com/Concept211/Google-Maps-Markers

链接到 GitHub 托管的图像文件时使用以下格式：

https://raw.githubusercontent.com/Concept211/Google-Maps-Markers/master/images/marker_[color][character].png

颜色

red, black, blue, green, grey, orange, purple, white, yellow

字符

A-Z, 1-100, !, @, $, +, -, =, (%23 = #), (%25 = %), (%26 = &), (blank = •)

示例：

https://raw.githubusercontent.com/Concept211/Google-Maps-Markers/master/images/marker_red1.png

https://raw.githubusercontent.com/Concept211/Google-Maps-Markers/master/images/marker_blue2.png

https://raw.githubusercontent.com/Concept211/Google-Maps-Markers/master/images/marker_green3.png

【讨论】：

太好了，唯一的就是不允许浮点数。

【解决方案5】：

不使用默认解决方案 (http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=7|FF0000|000000)，您可以使用 JavaScript 随意创建这些图像，而无需任何服务器端代码。

Google google.maps.Marker 接受 Base64 作为其图标属性。有了这个，我们可以从 SVG 创建一个有效的 Base64。

您可以在此 Plunker 中看到生成与此图像相同的代码：http://plnkr.co/edit/jep5mVN3DsVRgtlz1GGQ?p=preview

var markers = [
  [1002, -14.2350040, -51.9252800],
  [2000, -34.028249, 151.157507],
  [123, 39.0119020, -98.4842460],
  [50, 48.8566140, 2.3522220],
  [22, 38.7755940, -9.1353670],
  [12, 12.0733335, 52.8234367],
];

function initializeMaps() {
  var myLatLng = {
    lat: -25.363,
    lng: 131.044
  };

  var map = new google.maps.Map(document.getElementById('map_canvas'), {
    zoom: 4,
    center: myLatLng
  });

  var bounds = new google.maps.LatLngBounds();

  markers.forEach(function(point) {
    generateIcon(point[0], function(src) {
      var pos = new google.maps.LatLng(point[1], point[2]);

      bounds.extend(pos);

      new google.maps.Marker({
        position: pos,
        map: map,
        icon: src
      });
    });
  });

  map.fitBounds(bounds);
}

var generateIconCache = {};

function generateIcon(number, callback) {
  if (generateIconCache[number] !== undefined) {
    callback(generateIconCache[number]);
  }

  var fontSize = 16,
    imageWidth = imageHeight = 35;

  if (number >= 1000) {
    fontSize = 10;
    imageWidth = imageHeight = 55;
  } else if (number < 1000 && number > 100) {
    fontSize = 14;
    imageWidth = imageHeight = 45;
  }

  var svg = d3.select(document.createElement('div')).append('svg')
    .attr('viewBox', '0 0 54.4 54.4')
    .append('g')

  var circles = svg.append('circle')
    .attr('cx', '27.2')
    .attr('cy', '27.2')
    .attr('r', '21.2')
    .style('fill', '#2063C6');

  var path = svg.append('path')
    .attr('d', 'M27.2,0C12.2,0,0,12.2,0,27.2s12.2,27.2,27.2,27.2s27.2-12.2,27.2-27.2S42.2,0,27.2,0z M6,27.2 C6,15.5,15.5,6,27.2,6s21.2,9.5,21.2,21.2c0,11.7-9.5,21.2-21.2,21.2S6,38.9,6,27.2z')
    .attr('fill', '#FFFFFF');

  var text = svg.append('text')
    .attr('dx', 27)
    .attr('dy', 32)
    .attr('text-anchor', 'middle')
    .attr('style', 'font-size:' + fontSize + 'px; fill: #FFFFFF; font-family: Arial, Verdana; font-weight: bold')
    .text(number);

  var svgNode = svg.node().parentNode.cloneNode(true),
    image = new Image();

  d3.select(svgNode).select('clippath').remove();

  var xmlSource = (new XMLSerializer()).serializeToString(svgNode);

  image.onload = (function(imageWidth, imageHeight) {
    var canvas = document.createElement('canvas'),
      context = canvas.getContext('2d'),
      dataURL;

    d3.select(canvas)
      .attr('width', imageWidth)
      .attr('height', imageHeight);

    context.drawImage(image, 0, 0, imageWidth, imageHeight);

    dataURL = canvas.toDataURL();
    generateIconCache[number] = dataURL;

    callback(dataURL);
  }).bind(this, imageWidth, imageHeight);

  image.src = 'data:image/svg+xml;base64,' + btoa(encodeURIComponent(xmlSource).replace(/%([0-9A-F]{2})/g, function(match, p1) {
    return String.fromCharCode('0x' + p1);
  }));
}

initializeMaps();

#map_canvas {
  width: 100%;
  height: 300px;
}

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
    
  </head>

  <body>
    <div id="map_canvas"></div>
  </body>
  
  <script src="script.js"></script>

</html>

在这个演示中，我使用 D3.js 创建 SVG，然后将 SVG 转换为 Canvas，因此我可以根据需要调整图像大小，然后使用 canvas 的 toDataURL 方法获得 Base64。

所有这些演示都是基于我的同事 @thiago-mata 的代码。为他点赞。

【讨论】：

这个演示在 chrome 中运行良好，但在 firefox 上无法运行，图标未生成。为什么？

【解决方案6】：

上面的链接 ('http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=1|FE6256|000000') 不能通过 SSL 使用。在本地生成和存储数字图像：

for i in {1..99}; do curl -o ./${i}_map_icon.png  "http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=${i}|FE6256|000000"; echo $i; done

【讨论】：

【解决方案7】：

icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=1|FE6256|000000'

1 位和 2 位数字看起来不错

（来自 Mauro 的链接）

【讨论】：

【解决方案8】：

while creating marker use the 

<script>
var marker = new google.maps.Marker({
            position: myLanLat,
            icon:'icon: 'https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld='+ (position) +'|FF776B|000000',
            map: map,
                  });
<script>

【讨论】：

【解决方案9】：

<hr/>
1. add Google maps script To _Layout page.<br/>
     &lt;script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"&gt;   &lt;/script &gt;
<hr/>
2. Add script to your view page.

  &lt;script type="text/javascript" &gt;<br/>
   var mapLocation = [['Lucknow', 26.74561, 80.859375],<br/>
                    ['New Delhi', 28.613459, 77.695313],<br/>
                    ['Jaipur', 26.980829, 75.849609],<br/>
                    ['Ahmedabad', 22.674847, 72.333984],<br/>
                    ['Mumbai', 18.760713, 73.015135]];<br/>
    $(document).ready(function () { initialize(); });

//在视图初始化加载默认地图

function initialize() {<br/>
        var latLng = new google.maps.LatLng(22.917923, 76.992188);<br/>
        var myOptions = { center: latLng, zoom: 10,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };<br/>
        var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

        setMarker(map, mapLocation);
    }

function setMarker(map, mapLoc) {
    for (i = 0; i < mapLoc.length; i++) {
        var loca = mapLoc[i];
        var myLanLat = new google.maps.LatLng(loca[1], loca[2]);
        var marker = new google.maps.Marker({
            position: myLanLat,
            icon:'https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld='+ ( i     + 1) +'|FF776B|000000',
            shadow:'https://chart.googleapis.com/chart?chst=d_map_pin_shadow',
            map: map,
            tittle: loca[0],
            zIndex: loca[3]
        });
    }
}

【讨论】：

【解决方案10】：

刚找到这个教程：http://biostall.com/adding-number-or-letters-to-google-maps-api-markers

这看起来不是最好的解决方案，但确实有效。

【讨论】：

【解决方案11】：

您可以在标记上使用标签，here is a tutorial about GIcon.label。

您也可以使用GMarker.openInfoWindow。

提示：This is the best tutorial我发现了关于google maps api（当然是在Official documentation之后）

【讨论】：

有没有办法使用 Google Maps Javascript API V3 做到这一点？
从教程中我也不清楚如何为标签设置任意文本（例如给标签）
我没有尝试V3，但是默认情况下，google支持向后兼容。图标标签背后的想法是创建 2 个图像：一个用于图标本身（如果您不需要使用默认图标），另一个图像覆盖第一个图像。第二个图像可以准备包含一些文本，然后将其用作标记标签。要即时创建此标签，您必须在运行时创建此图像，当然这将在服务器端，例如，如果您使用的是 ASP.NET，这并不难。
至于 v3，我找到了这个示例（MarkerClusterer）但我没有尝试：google-maps-utility-library-v3.googlecode.com/svn/tags/…
如果您查看 MarkerClusterer（我已经使用过这个项目），他们会创建这些带有数字的集群，并且它们不是在服务器端生成的。然而，看看代码，我不确定他们是如何在标记上创建数字的。