关于百度地图截图的问题。

关于百度地图截图的问题。

最近公司让做一个地图截图功能,我首先就想到了百度地图的静态图,不过这种方式不能满足公司的需求,就改用了html2canvas绘制,才算解决了这个问题,不过这里就把两个方法都介绍一下吧。

1.百度地图的静态图

下面是官方解释:
它可以实现将百度地图以图片形式嵌入到您的网页中。您只需发送HTTP请求访问百度地图静态图服务,便可在网页上以图片形式显示您的地图。静态图API较之JavaScript API载入的动态网站,既能满足基本的地图信息浏览,又能加快网页访问速度。通过给标签设置src属性即可将地图图片显示在网页中。用户可以指定图片的尺寸、地图的显示范围(包含中心点和缩放级别),还可以放置一些覆盖物在地图上,以生成符合需求的地图图片。
通俗来说就是,你把你想得到的地图的坐标,层级通过http请求发送给百度后台,他会返回给你一个静态图片,这个图片你可以下载,也可以展示到网页上。
于是我就去研究了一下,api地址:http://lbsyun.baidu.com/index.php?title=static
发现了一个问题,由于是http请求,url的长度是有限制的,百度官方的服务文档也有说明:

使用条款与限制:
云端存储
URL长度:2048
点标记的数量:50个
调用次数:同一个开发者帐号下的HTTP/HTTPS请求,配额、并发共享。

由于公司需求是要在地图上打点的,并且点比较多,所以这种方式不适合我,不过我还是研究了一下,发现了一个方法,最多可以打200个点左右,应该能满足一部分人的需求了。

我没有采用标注的方式,而是采用的标签进行打点。将标签的内容改成空格,设置标签字体大小为自己需要的点的大小,并设置标签字体颜色为空,就可以了。更改字体大小,就可以改变点的大小,更改背景颜色就可以改变点的颜色。
 http://api.map.baidu.com/staticimage/v2?ak=*********************************&width=400&height=200¢er=116.487812,40.017524&labels=116.487812,40.017524&zoom=12&labelStyles= ,1,3,,0x000fff,1
亲测可以打200个点左右

2.使用html2canvas进行网页截图

官方GitHub:
https://github.com/niklasvh/html2canvas  

这个方法很简单,就是将盛放百度地图的DOM,绘制出来并保存为图片,具体的大家可以看一下github上的api。

直接贴个demo吧,可直接复制使用:

<html>

<head>
<meta charset="UTF-8" />
    <style type="text/css">
        html {
            height: 100%
        }

        body {
            height: 100%;
            margin: 0px;
            padding: 0px
        }

        #container {
            height: 300px;
        }
    style>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js">script>
    <script src="https://cdn.bootcss.com/html2canvas/0.4.1/html2canvas.js">script>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.5&ak=GxNhfawaxLTS1MBYVkdxm7KI">script>
    <script>
        //以下是截图代码 
        $(function () {
            $("#btn").click(function () {
                html2canvas($("#container"), {
                    height: $("#contbox").outerHeight() ,
                    width: $("#contbox").outerWidth(),
                    useCORS : true,
                    foreignObjectRendering : true,
                    allowTaint :false,
                    onrendered: function (canvas) {
                        //将canvas画布放大若干倍,然后盛放在较小的容器内,就显得不模糊了 
                        var timestamp = Date.parse(new Date());
                        //把截取到的图片替换到a标签的路径下载 
                        $("#down1").attr('href', canvas.toDataURL());
                        console.log(canvas.toDataURL());
                        //下载下来的图片名字 
                        $("#down1").attr('download', timestamp + '.png');
                        //document.body.appendChild(canvas); 
                    },
                    //可以带上宽高截取你所需要的部分内容 
                });
            });
        });
    script>

head>

<body tabindex="1" class="loadingInProgress" id="contbox">
    <button class="btn" id="btn">截取屏幕button>
    <div>
        <a id="down1" class="down" href="" download="downImg">截图下载a>
    div>
    <div id="container" style="width: 800px;height:600px ">div>

body>
<script type="text/javascript">
        // 创建地图实例  
        var map = new BMap.Map("container");
        // 创建点坐标  
        var point = new BMap.Point(116.404, 39.915);
        // 初始化地图,设置中心点坐标和地图级别
        map.centerAndZoom(point, 15);
    script>
html>

希望对大家有所帮助吧。

你可能感兴趣的:(关于百度地图截图的问题。)