HTML5 Hackathon成果—改善PrintMyMap的地圖標記名稱顯示效果

阿修 (Justin Lee)www.lis186.com

2011/1/4

Google My Maps列印功能有跟沒有一樣

http://goo.gl/sK4BM

先前版本的問題

互相重疊不易閱讀風格與原地圖差異大

文字風格與原地圖差異大—改用Canvas來畫

Google Maps的風格—黑字白框

用webkitTextStroke試試 placenameDiv.style.fontWeight = "bold"; placenameDiv.style.fontSize = "16px"; placenameDiv.style.color = "#000"; placenameDiv.style.webkitTextStroke = "1px #FFFFFF";

目前text-stroke只支援Chrome和Safari

文字被吃掉了

改用Canvas的storkeText var markerDiv = document.createElement("div");

markerDiv.id='myMarker'+i; markerDiv.className="printableMarker"; div.appendChild(markerDiv); var labelCanvas=document.createElement("canvas"); labelCanvas.setAttribute("width",myPOIs[i].name.length*13+"px"); labelCanvas.setAttribute("height","13px");

labelCanvas.id='myPOIname'+i; labelCanvas.className="nameLabel"; div.appendChild(labelCanvas); var context=document.getElementById('myPOIname'+i).getContext("2d"); context.textBaseline="top"; context.textAlign = "left"; context.fillStyle="#000000"; context.strokeStyle="#F3F781"; context.lineWidth=5; context.font = "13px sans-serif"; context.strokeText(myPOIs[i].name,0,0); context.strokeStyle="#FFFFFF"; context.lineWidth=2; context.font = "13px sans-serif"; context.strokeText(myPOIs[i].name,0,0); context.fillText(myPOIs[i].name,0,0);

邊緣還差一點

讓邊緣完整呈現var markerDiv = document.createElement("div");

markerDiv.id='myMarker'+i; markerDiv.className="printableMarker"; div.appendChild(markerDiv); var labelCanvas=document.createElement("canvas"); labelCanvas.setAttribute("width",myPOIs[i].name.length*13+4+"px"); labelCanvas.setAttribute("height",13+4+"px");

labelCanvas.id='myPOIname'+i; labelCanvas.className="nameLabel"; div.appendChild(labelCanvas); var context=document.getElementById('myPOIname'+i).getContext("2d"); context.textBaseline="top"; context.textAlign = "left"; context.fillStyle="#000000"; context.strokeStyle="#F3F781"; context.lineWidth=5; context.font = "13px sans-serif"; context.strokeText(myPOIs[i].name,2,2); context.strokeStyle="#FFFFFF"; context.lineWidth=2; context.font = "13px sans-serif"; context.strokeText(myPOIs[i].name,2,2); context.fillText(myPOIs[i].name,2,2); labelCanvas.style.position="absolute"; labelCanvas.style.left = loc.x-sw.x+16+ "px"; labelCanvas.style.top = loc.y-ne.y-34 + "px";

漂亮多了

舊 新

http://goo.gl/sK4BM

Thank you!