換行符不工作在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

谷歌地圖MapLabel對象使用不支持多行文本的HTML5 canvas fillText（）方法。

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

你可能要考慮使用的信息窗口代替。下面是信息窗口的文檔：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 2

嘗試

<BR> 

，因爲它使用HTML標記，或使用CSS創建休息。

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