只是很孤单qq 2022-04-28 16:05 采纳率: 100%
浏览 273
已结题

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

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、现在我要把这张图片区域内,图片、标记物导出来生成一张图片。

  • 写回答

3条回答 默认 最新

  • web修理工 2022-04-28 18:48
    关注

    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>
    
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
查看更多回答(2条)

报告相同问题?

问题事件

  • 系统已结题 5月13日
  • 已采纳回答 5月5日
  • 创建了问题 4月28日

悬赏问题

  • ¥15 python的qt5界面
  • ¥15 无线电能传输系统MATLAB仿真问题
  • ¥50 如何用脚本实现输入法的热键设置
  • ¥20 我想使用一些网络协议或者部分协议也行,主要想实现类似于traceroute的一定步长内的路由拓扑功能
  • ¥30 深度学习,前后端连接
  • ¥15 孟德尔随机化结果不一致
  • ¥15 apm2.8飞控罗盘bad health,加速度计校准失败
  • ¥15 求解O-S方程的特征值问题给出边界层布拉休斯平行流的中性曲线
  • ¥15 谁有desed数据集呀
  • ¥20 手写数字识别运行c仿真时,程序报错错误代码sim211-100