换行符在 javascript 谷歌地图标签中不起作用答案

【问题标题】：Newline not working in javascript google map label换行符在 javascript 谷歌地图标签中不起作用
【发布时间】：2013-03-06 07:51:02
【问题描述】：

下面的代码在多边形上放置了一个标签，并且除了换行符之外工作正常。文本中的变量是 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]%>));

【问题讨论】：

Infowindows 和谷歌地图的其他元素使用 html 标记。使用
我试过了"" +
+ "" + ""，和那没有用。如果我将
放在引号中，它只会显示为文本

标签： c# javascript asp.net google-maps google-maps-api-3

【解决方案1】：

试试

<BR>

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

【讨论】：

我觉得你打错了

【解决方案2】：

谷歌地图 MapLabel 对象使用不支持多行文本的 HTML5 画布 fillText() 方法。

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

您可能要考虑改用信息窗口。这是 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]%>)
                });

【讨论】：

我的项目要求我在多边形上使用纯文本，所以我不能使用信息窗口。我可能不得不为每一行绘制多个标签。感谢您的信息

【解决方案3】：

发件人：Multiline / Wrap Text Support - GitHub

方式一：

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

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/

方式二：

替换：

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

【讨论】：