【报Bug】H5+ Maps模块中的Bubble.loadImageDataURL()方法无效

分类：HTML5+

详细问题描述
使用H5+接口中的 Maps模块——Bubble.loadImageDataURL()方法无效；

按照官方文档：
bubObj.loadImageDataURL( data );
说明：
通过加载图片数据来自定义气泡显示的内容，加载图片后将清空气泡使用的图标及文字内容。图片数据可通过Canvas自定义绘制后调用toDataURL来获取。

参数：
data: ( String ) 必选要加载的图片数据
图片数据为经过Base64URL编码转换后的字符串，如果图片数据无效则使用之前的内容显示。

实际测试，得到canvas的base64码字符串后作为参数使用Bubble.loadImageDataURL()，但是气泡并没有显示任何内容。

联系方式
qq:245943272

2016-04-14 22:59 负责人:无分享

5 个回复

DCloud_IOS_XTY

<canvas id="bubbleCanvas" width="300" height="150" style="border:1px solid #d3d3d3;"/>  

<script type="text/javascript">  
var c=document.getElementById("bubbleCanvas");  
var ctx=c.getContext("2d");  
ctx.strokeStyle="#0000ff";  
ctx.strokeRect(20,20,150,100);  
...  

var marker=new plus.maps.Marker(new plus.maps.Point(119.347292,39.968716));  
marker.setIcon("/logo.png");  
marker.setLabel("HBuilder");  
var bubble = new plus.maps.Bubble("打造最好的HTML5移动开发工具");  
marker.setBubble(bubble);  
map.addOverlay(marker);  
bubble.loadImageDataURL(bubbleCanvas.toDataURL());  
/*bubble.loadImageDataURL("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAsCAYAAAAn4+taAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABZ0RVh0Q3JlYXRpb24gVGltZQAwNC8wMS8xNExYUU4AAAAcdEVYdFNvZnR3YXJlAEFkb2JlIEZpcmV3b3JrcyBDUzbovLKMAAACTklEQVRoge2YO2gUURSGv7PjEkULO4UoFooIFgtzprAPWMiWKewSTadgYWEhBjHCloGUQtYHaGEjGAQtUmgnZO9YpsqC2NgYIwjRInMscoPrYkzhGTIs8zdnzoP578ewM/eumBmjoMZ+L8BLNUjVVINUTTVI1VSDVE0jA3KgjJuGEE6LyI2iKC6JyBkzWxORF8ADVV0rw1O891ohhCngPnDyL+1PZjabZdkTV1OcQUIIV4CHMf0JvAK+A0eANjAWe1dV9ZGbMY6/kTzPzwHzMV0VkZaqTgLTqjopIi1gNfbnQwhnvbzBEcTMbgFHgXURaRdFsRFCWAa+hhCWi6LYEJE2sB7nbnp5g+9b62KMIU3Tvoh0gQm2Fz0hIt00TftAADCztqO3K8h4jJsAZnZ+sDmQ/wAQkXEc5QnyJcZjACLybLApIk/j5YmheRd5gryLMev1elOqesfMrpvZczO7pqqzvV5vGmgNzbvIDUREXsbLRES6IYTbzWZzMcuyy0mSPA4h3BWRxR3PgXkff6/vSJ7nx83sPXBqoLwJFEACHByofxSRC2mafnYxx/GJxEW9GSofAg7zJwTAa08I8N80doG9HrHx++vvJlcQVV0xs6V/zZjZkqquePpCOdv4OWBrl96WiNwrwdMfJMuyHFjYpb2gqh+8PaG8g9Uc0B+q9WO9FJUCoqrfgBm2X73EOBPrpai0o66qvgU6Me3EvDSVctTdUZIknaIoxhqNRmfv6f+T+1F3vzQy/6LUIFVTDVI11SBVUw1SNdUgVdPIgPwCtt+2JPQRVicAAAAASUVORK5CYII=");*/  
</script>

4***@QQ.COM

多谢官方团队回答！还有一个问题，就是这串Base64URL编码是怎么生成的，初学h5跟js，这个不太清楚~~

2016-04-28 13:57
3***@qq.com

这段代码为什么只有在苹果手机上能显示图片，在Android手机上失效啊

2016-08-15 13:53

wolfmanlx

function addShopMarker(){
var shopMark=document.getElementById("is_create_shop_marker");

if(shopMark.value*1==1){  
    return;  
}  
var shop_lng=document.getElementById("shop_lng").value;  
var shop_lat=document.getElementById("shop_lat").value;  

var canvas=document.getElementById("shopcanvas");  

var ctx=canvas.getContext("2d");  

//控制背景图片的大小  
var into = document.createElement("canvas");  
var ctx2 = into.getContext('2d');  
into.width = 80;  
into.height = 80;  

var img = new Image();  
img.src = shopUrl;  
img.onload=function(){  
    //设置尖角箭头  
    ctx.beginPath();  
    ctx.lineJoin="round";  
    ctx.moveTo(15,66);  
    ctx.lineTo(30,75);  

    ctx.lineTo(45,66);  

    ctx.fillStyle='#FF9933';  
    ctx.strokeStyle="#FF9933";  
    ctx.stroke();  
    ctx.closePath();  
    ctx.fill();  

    ctx.beginPath();  
    ctx.arc(30, 40, 30, 0, 2 * Math.PI);  

    // 填充绘制的圆  
    ctx.fillStyle='#FF9933';  
    ctx.strokeStyle='#FF9933';  
    ctx.closePath();  
    ctx.fill();  

    ctx.beginPath();  
    // 这里使用圆  
    ctx.arc(30, 40, 25, 0, 2 * Math.PI);  

    // 填充绘制的圆  
    ctx.fillStyle='white';  

    ctx.closePath();  
    ctx.fill();  

    //设置圆形图片  
    ctx.beginPath();  
    //在新建的canvas 绘制图片 加入ctx 背景图片  
    ctx2.drawImage(img,0,10,60,60);  
    var partern=ctx.createPattern(into,'no-repeat');  
    ctx.arc(30, 40, 25, 0, 2 * Math.PI);  

    ctx.fillStyle=partern;  
    ctx.closePath();  
    // 填充绘制的圆  
    ctx.fill();  

    var m = new plus.maps.Marker(new plus.maps.Point(shop_lng, shop_lat));  
    var bubble = new plus.maps.Bubble(shopName);  
    bubble.loadImageDataURL(canvas.toDataURL());  
    m.setBubble(bubble, true);  
    m.setLabel(shopName);  
    map.addOverlay(m);  

    //这里表示已经创建过Mark图标了  
    shopMark.value=1;  
}

}