c# - 换行符在 javascript 谷歌地图标签中不起作用

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 画布 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

来自：多行/换行文本支持 - 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));
      }
}