我已经使用Google地图中的Html2Canvas库进行了屏幕截图,但是与Google使用的css3转换存在兼容性问题。该地图确实显示了我,但是侧面有一个空格,标记也没有向我显示。
这是捕获内容的显示方式:
这在您进行捕获时显示:
我已经看到一种可能的解决方案是在代码中添加以下行:
left:0,
top:0,
transform: "none"
但是这对我不起作用,因为我通过从浏览器将它们放到网上进行了尝试。我附上了代码
Component.Vue
async print() {
const el = this.$refs.captureMap
// add option type to get the image version
// if not provided the promise will return
// the canvas.
const options = {
type: 'dataURL',
useCORS: true
}
this.output = await this.$html2canvas(el, options).then(function(canvas){
console.log(document.getElementsByClassName('gm-style'))
$(".gm-style>div:first>div").css({
left:0,
top:0,
transform: "none"
});
console.log(canvas)
// document.getElementsByClassName('gm-style').style.left="0px"
// document.getElementsByClassName('gm-style').style.top="0px"
// document.getElementsByClassName('gm-style').style.transform="none"
})
}
感谢朋友