1.通过地图瓦片图层 https://lbs.amap.com/api/javascript-api/reference/layer/
- 用 html2canvas 转地图的dom元素 转成图片进行处理
- 代码明天写
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta charset="utf-8" />
<!-- <script src="Jscript/jquery-1.8.2.min.js"></script> -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/html2canvas/1.4.1/html2canvas.js"></script>
<!-- <script src="Html2canvas_JS/base64.js"></script> -->
<!-- <script src="Html2canvas_JS/canvas2image.js"></script>
<script src="Html2canvas_JS/html2canvas.min.js"></script> -->
</head>
<body>
<button id="btn_save">完成</button>
<div id="thecanvas"></div>
<div id="canvasDiv" style="display: none; height: 520px; width: 100%;"></div>
<div class="container form-group" id="container"
style="height: 50px; width: 10%; margin: 10px 15px 30px 15px; position: static !important;"></div>
<link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css" />
<script
src="http://webapi.amap.com/maps?v=1.4.5&key=053894472da70792b8d9cc4b979fafed&plugin=AMap.MarkerClusterer,AMap.MouseTool,AMap.Geocoder"></script>
<script type="text/javascript" src="http://webapi.amap.com/demos/js/liteToolbar.js"></script>
<script src="http://webapi.amap.com/ui/1.0/main.js"></script>
<script type="text/javascript">
var googleLayerf = new AMap.TileLayer({
// getTileUrl: 'http://mt{1,2,3,0}.google.cn/vt/lyrs=s&hl=zh-CN&gl=cn&x=[x]&y=[y]&z=[z]&s=Galile'
gettingUrl: 'http://webst{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scl=1&style=7&x={x}&y={y}&z={z}'
});
var roadNetLayerf = new AMap.TileLayer.RoadNet();
var map = new AMap.Map('container',
{
resizeEnable: true,
zoom: 4,
zooms: [3, 21],
layers: [googleLayerf, roadNetLayerf],
center: [103.7822008899, 36.2167828433]
});
function createImg() {
html2canvas(document.getElementById('container'), {
backgroundColor: null
}).then((canvas) => {
let url = canvas.toDataURL('image/png')
console.log(url, '=====================================123')
})
};
$(function () {
$('#btn_save').click(function () {
setTimeout(function () {
createImg();
}, 500);
});
});
</script>
</body>
</html>