4***@qq.com
4***@qq.com
  • 发布:2016-12-11 11:26
  • 更新:2016-12-12 14:46
  • 阅读:2285

百度地图canvas气泡不显示,大神帮忙看下问题出在哪?

分类:HTML5+
function addMarker() {  
                if(marker) {  
                    return;  
                }  
                var canvas = document.getElementById('canvas');  
                var ctx = canvas.getContext('2d');  
                var img = new Image();  
                img.src = "../img/map_layer_green.png";  

                img.onload = function() {  
                    ctx.drawImage(img, 0, 0);  
                    ctx.fillText("自己的位置", 0, 0);  
                    console.log(canvas.toDataURL());  
                }  
                marker = new plus.maps.Marker(new plus.maps.Point(121.929282, 30.903541));  
                var bubble = new plus.maps.Bubble('打造最好的HTML5移动开发工具');  

                marker.setBubble(bubble, true);  
                map.addOverlay(marker);  
                bubble.loadImageDataURL(canvas.toDataURL());  
            }

输出base64转码是正常的,调试台也能看到图片资源加载,但是气泡样式还是默认的,并没有加载canvas自定义的气泡

2016-12-11 11:26 负责人:无 分享
已邀请:
4***@qq.com

4***@qq.com (作者)

犯了个低级错误,canvas没有appendChild 但是要怎么appaend到地图的webview中呢?

  • 4***@qq.com (作者)

    改成了getElement也还是不显示

    2016-12-11 14:19

4***@qq.com

4***@qq.com (作者)

help

4***@qq.com

4***@qq.com (作者)

怎么没人响应,难道我提问的姿势不对?

4***@qq.com

4***@qq.com (作者)

function addMarker() {  
                if(marker) {  
                    return;  
                }  
                var canvas = document.getElementById('canvas');  
                var ctx = canvas.getContext('2d');  
                var img = new Image();  
                img.src = "../img/map_layer_green.png";  
                img.onload = function() {  
                    ctx.drawImage(img, 0, 0);  
                    ctx.fillText("自己的位置", 0, 0);  
                    marker = new plus.maps.Marker(new plus.maps.Point(121.929282, 30.903541));  
                    var bubble = new plus.maps.Bubble('打造最好的HTML5移动开发工具');  
                    marker.setBubble(bubble, true);  
                    bubble.loadImageDataURL(canvas.toDataURL());  
                    map.addOverlay(marker);  
                }  
            }

改成这样就可以显示了
第一,把bubble绘制放到img.onload中,保证图片绘制成功后在设置bubble
第二,把bubble.loadImageDataURL(canvas.toDataURL());放到addOverlay之前
之前是参考这个问题的回答,bubble.loadImageDataURL(canvas.toDataURL());是在addOverlay之后,应该是不对的吧
http://ask.dcloud.net.cn/question/17591

  • 叶末

    也不行,直接连marker点都无法显示

    2017-03-08 17:28

该问题目前已经被锁定, 无法添加新回复