换行不工作在javascript谷歌地图标签

本文关键字：谷歌地图 标签 javascript 工作 换行 | 更新日期: 2023-09-27 18:04:29

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

换行不工作在javascript谷歌地图标签

谷歌地图的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]%>)
                });

Try 

<BR>

使用HTML标记，或者使用CSS来创建分隔符

From: 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));
      }
}
相关文章：