Question

下面的代码在多边形上放置一个标签，除了换行符外，它的工作正常。文本中的变量是c＃，它们也可以正常工作。出于某种原因，我无法让新线工作。它编译但所有内容都显示在同一行。

var AustinLabel = new MapLabel({
                    text: "<%=zipCentroid[i]%>" + "\n" + "<%=colorCount[i]%>" + "<%=layerType%>", 
                    position: new google.maps.LatLng(<%=zipLat[i]%>, <%=zipLong[i]%>),
                    map: map,
                    fontSize: 30,
                    minZoom: 13,
                    fontColor: "#FFFFFF",
                    strokeColor: "#000000"
                });
                AustinLabel.set('position', new google.maps.LatLng(<%=zipLat[i]%>, <%=zipLong[i]%>));

Answer 1

尝试

<BR>

因为它使用html标记，或者使用css来创建中断。

Answer 2

谷歌地图MapLabel对象使用HTML5 canvas fillText（）方法，该方法不支持多行文本。

https://code.google.com/p/google-maps-utility-library-v3/source/browse/trunk/maplabel/src/maplabel.js?r=300

您可能需要考虑使用InfoWindow。以下是InfoWindow的文档：https://developers.google.com/maps/documentation/javascript/reference#InfoWindow

var AustinLabel = new google.maps.InfoWindow({
                    content: "<%=zipCentroid[i]%>" + "<br/>" + "<%=colorCount[i]%>" + "<%=layerType%>", 
                    position: new google.maps.LatLng(<%=zipLat[i]%>, <%=zipLong[i]%>)
                });

Answer 3

来自：Multiline / Wrap Text Support - GitHub

方式1：

要获得多行支持，请添加以下内容：

MapLabel.prototype.wrapText = function(context, text, x, y, maxWidth, lineHeight) {
  var words = text.split(' ');
  var line = '';

  for(var n = 0; n < words.length; n++) {
    var testLine = line + words[n] + ' ';
    var metrics = context.measureText(testLine);
    var testWidth = metrics.width;
    if (testWidth > maxWidth && n > 0) {
      context.strokeText(line, x, y);
      context.fillText(line, x, y);

      line = words[n] + ' ';
      y += lineHeight;
    }
    else {
      line = testLine;
    }
  }
  context.strokeText(line, x, y);
  context.fillText(line, x, y);
};

在drawCanvas_中，更改

if (strokeWeight) {
  ctx.lineWidth = strokeWeight;
  ctx.strokeText(text, strokeWeight, strokeWeight);
}

ctx.fillText(text, strokeWeight, strokeWeight);

到

if (strokeWeight) {
  ctx.lineWidth = strokeWeight;

}

this.wrapText(ctx, text, strokeWeight, strokeWeight, *ADD MAX WIDTH*, *ADD LINEHEIGHT*);
//e.g.  this.wrapText(ctx, text, strokeWeight, strokeWeight, 200, 14);

此代码是以下内容的扩展： http://www.html5canvastutorials.com/tutorials/html5-canvas-wrap-text-tutorial/

方式2：

替换：

if (strokeWeight) {
   ctx.lineWidth = strokeWeight;
   ctx.strokeText(text, strokeWeight, strokeWeight);
}

ctx.fillText(text, strokeWeight, strokeWeight);

与

if (strokeWeight) {
   ctx.lineWidth = strokeWeight;
  // ctx.strokeText(text, strokeWeight, strokeWeight);
}
    // ctx.fillText(text, strokeWeight, strokeWeight);
    var lineheight = 15;
    var lines = text.split('\n');

for (var i = 0; i<lines.length; i++) {
   ctx.fillText(lines[i], strokeWeight, strokeWeight + (i * lineheight));
   if (strokeWeight) {
        ctx.lineWidth = strokeWeight;
        ctx.strokeText(lines[i], strokeWeight, strokeWeight + (i * lineheight));
      }
}

换行无法在javascript google地图标签中使用

3 个答案: