0

以下のコードはポリゴンにラベルを付け、改行を除いて正常に動作します。テキスト内の変数は 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]%>));
4

3 に答える 3

2

試す

<BR>

html マークアップを使用するか、css を使用してブレークを作成します。

于 2013-03-18T02:48:05.730 に答える
1

Google マップの 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]%>)
                });
于 2013-03-18T03:15:08.990 に答える
0

From :複数行/折り返しテキストのサポート - 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));
      }
}
于 2017-08-02T10:35:20.070 に答える