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

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

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 10: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月12日
  • 已采纳回答 5月5日
  • 创建了问题 4月28日

悬赏问题

  • ¥15 DevEco studio开发工具 真机联调找不到手机设备
  • ¥15 请教前后端分离的问题
  • ¥100 冷钱包突然失效,急寻解决方案
  • ¥15 下载honeyd时报错 configure: error: you need to instal a more recent version of libdnet
  • ¥15 距离软磁铁一定距离的磁感应强度大小怎么求
  • ¥15 霍尔传感器hmc5883l的xyz轴输出和该点的磁感应强度大小的关系是什么
  • ¥15 vscode开发micropython,import模块出现异常
  • ¥20 Excel数据自动录入表单并提交
  • ¥30 silcavo仿真,30分钟,只需要代码
  • ¥15 FastReport 怎么实现打印后马上关闭打印预览窗口
手机看
程序员都在用的中文IT技术交流社区

程序员都在用的中文IT技术交流社区

专业的中文 IT 技术社区,与千万技术人共成长

专业的中文 IT 技术社区,与千万技术人共成长

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

客服 返回
顶部