解決:使用百度地圖靜態圖處理( http://lbsyun.baidu.com/index.php?title=static ),這時域名確定了( http://api.map.baidu.com ),可以用反向代理來解決跨域
<!--html--><el-image:src=`/baidu-static/staticimage/v2?ak=yourak&width=1024&height=400¢er=${center.lng},${center.lat}&zoom=16`><div slot=placeholder class=image-slot> 加載中<span class=dot>...</span></div></el-image><!--nginx-->location ^~ /baidu-static/ {add_header 'Access-Control-Allow-Origin' $http_origin always;add_header 'Access-Control-Allow-Credentials' 'true' always;add_header 'Access-Control-Allow-Methods' 'GET, OPTIONS' always;add_header 'Access-Control-Allow-Headers' 'Accept,Authorization,Cache-Control,Content-Type,DNT,If-Modified-Since,Keep-Alive,Origin,User-Agent,X-Requested-With' always;proxy_pass http://api.map.baidu.com/;}問題2:地圖上的覆蓋物怎麼顯示出來呢解決:看了下百度地圖靜態圖的api, 不能很好的支持覆蓋物自定義樣式,最多可以讓你指定一張自定義的圖片(不能是本地圖片)。中間試過很多辦法,覺得可行的是使用openLayers.Map, 可是代碼改動的工作量太大了,果斷放棄了。再後來想到自己用div 直接模擬好覆蓋物,設置比靜態圖層級高一點就可以解決了。
問題3:用css 樣式畫了一個虛線圓,在html2canvas 處理後的生成的圖,發現虛線變成了實線解決:使用canvas 來畫圓
問題4:一個icon 採用絕對定位,在html2canvas 處理後的生成的圖,發現icon 沒有顯示解決:給icon 設置z-index 大於百度靜態圖層級(PS: 靜態圖的樣式也用了絕對定位的情況下)
問題5:在html2canvas 處理後生成的圖片,有黑色背景色解決: image/png 改成image/jpg
try { html2canvas(sharePage, { useCORS: true }).then((canvas) => { const imgBase64 = canvas.toDataURL('image/jpg') this.data64 = imgBase64 }) } catch (err) {}以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持武林網。