各位求指导，高德地图导出图片，有偿的哟

1、我在html网页中显示高德地图，高德地图api地址http://webapi.amap.com/maps?v=1.4.15&key=%E4%BD%A0%E7%94%B3%E8%AF%B7%E7%9A%84key&plugin=AMap.MouseTool%EF%BC%8C%E5%A6%82%E4%B8%8B%E5%9B%BE%EF%BC%9A

img

2、箭头中的图片是我通过gps贴在高德地图上面，然后我在高德地图上面绘制了标记，显示在图片上面。

3、现在我要把这张图片区域内，图片、标记物导出来生成一张图片。

1.通过地图瓦片图层 https://lbs.amap.com/api/javascript-api/reference/layer/

  1. 用 html2canvas 转地图的dom元素 转成图片进行处理
  2. 代码明天写

<!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>

可以通过html2canvas 转换

作者：透过地图看世界
链接：https://www.zhihu.com/question/482534171/answer/2085951692
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

高德自定义地图只能使用高德地图自己的API来调用，因为自定义的地图是高德根据自己的数据自主规范来制作的，类似于矢量数据的格式，向外提供服务。所以如果你要想自己下载地图的话，几乎是不推荐的。当然如果你真的有精力来做这件事的话，也是可以做的，你只想解析出高德地图数据渲染方式。然后将高德地图导出256*256的栅格切片就可以了，输出格式为png，然后再进行下载也是可以的，只不过解析的时间可能会比较长一点。最简单最容易的方法就是你根据高德上面的配图符号系统取下来，自己在Armap或者是超图里面再配一遍,这样也是很简单，也是最快的一个方法。如果速度快的话一天也就搞定了。对于配图来说并不算很难,高德提供自定义的地图，主要是提供他的地理数据，因为很多公司没有自己的数据没有那么全，那么完整。