由于高德官方没有导出图片的方法，所以只能用html2canvas来导出图片了。

<!--定义地图容器-->
<div id="map"></div>

// 使用html2canvas导出图片
function saveImg(){
  html2canvas(document.getElementById('map')).then((canvas) => {
    const dataUrl = canvas.toDataURL('image/jpeg')
    dataURIToBlob(`图片.jpg`, dataUrl, downloadImg)
  }).finally(() => {}
})

// 处理blob数据
function dataURIToBlob(imgName, dataURI, callback) {
  const binStr = atob(dataURI.split(',')[1])
  const len = binStr.length
  const arr = new Uint8Array(len)
  for (let i = 0; i < len; i++) {
    arr[i] = binStr.charCodeAt(i)
  }
  callback(imgName, new Blob([arr]))
}

// 下载图片
function downloadImg(imgName, blob) {
  const link = document.createElement('a')
  link.style.display = 'none'
  link.href = URL.createObjectURL(blob)
  link.download = imgName
  document.body.appendChild(link)
  link.click()
  document.body.removeChild(link)
}

警告

通过上面的办法，导出的地图会是空白图片。 一定要加上下面的原型链拓展，才可以正常导出。

HTMLCanvasElement.prototype.getContext = (function (origFn) {
  return function (type, attributes) {
    if (type === 'webgl') {
      attributes = Object.assign({}, attributes, {
        preserveDrawingBuffer: true
      })
    }
    return origFn.call(this, type, attributes)
  }
})(HTMLCanvasElement.prototype.getContext)

To Be Continued！😎