百度地图截图记录

// 获取截取的视图宽高

const getSize = () => {

let dom = document.querySelector('.container')

let width = dom.offsetWidth

let height = dom.offsetHeight - 212 - 10

return { width, height }

}

const mapScreenshot = async mapInstance => { //mapInstance初始化后的地图ID

let dom = document.createElement('div') //生成div

dom.setAttribute('class', 'print-copy-node') //生成d样式

let _ = getSize()

dom.setAttribute('style', `width: ${\_.width}px; height:${_.height}px;z-index:1`) //生成宽高

let domInner = document.createElement('div') //生成div

domInner.setAttribute('class', 'inner')let domMapSrc = mapInstance.getMapScreenshot() //获取地图，生成base64图片 （通过百度地图api）

let domMap = document.createElement('img') //生成img

domMap.src = domMapSrc //赋值图片路径

domInner.appendChild(domMap) 

let x = mapInstance.getPanes().floatShadow //获取在地图上的标记，（通过百度地图api）

domInner.appendChild(x.cloneNode(true))// cloneNode：克隆起节点和属性

dom.appendChild(domInner)

document.body.appendChild(dom)

const resultSrc = await createImage(dom) // 通过html2canvas生成图片 （createImage）插件封装

dom.parentNode.removeChild(dom) //删除map的节点

return resultSrc

}

通过浏览器打印地图：

1.生成图片如上

  const printThisWindow = (imgSrc) => {

let iframe = document.createElement('IFRAME')

let doc = null

iframe.setAttribute('class', 'print-iframe')

document.body.appendChild(iframe)

doc = iframe.contentWindow.document

doc.___imageLoad___ = function () { //生成图片返回

iframe.contentWindow.print() //打印iframe

document.body.removeChild(iframe) //删除iframe节点

}

doc.write('

')

doc.close()

iframe.contentWindow.focus()

}