html2canvas + 百度地图：轻松将地图内容导出为图片

2023-08-02 22:30:50

在百度地图中导出高清晰度图像的详细指南

概述

地图在当今社会扮演着至关重要的角色，无论是出行导航、旅行规划还是商业谈判。百度地图作为国内领先的地图服务商，为用户提供了海量信息和实用功能，满足了不同人群的出行需求。

然而，在使用百度地图时，保存地图内容往往只能通过截图的方式实现，这会显著降低图片的清晰度和质量。本文将介绍一种使用 HTML2Canvas、百度地图和 Canvg 三种工具的解决方案，帮助您将弹出框中的百度地图内容以高清晰度图片的形式导出，包括坐标点、线段和其他元素。

实现步骤

1. 引入必要的脚本库

首先，我们需要引入 HTML2Canvas、百度地图和 Canvg 的脚本库。

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.3.2/html2canvas.min.js"></script>
<script src="https://api.map.baidu.com/api?v=3.0&ak=YOUR_AK"></script>
<script src="https://cdn.jsdelivr.net/npm/canvg@4.0.1/dist/umd/canvg.min.js"></script>

其中，YOUR_AK 为您的百度地图 API Key，请替换为自己的 Key。

2. 创建百度地图实例

接下来，创建百度地图实例，指定地图中心点和缩放级别。

<div id="map" style="width: 500px; height: 500px;"></div>

<script>
  var map = new BMap.Map("map");
  map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
</script>

3. 添加坐标点和线段

根据需要，可以使用百度地图的 API 添加坐标点和线段。

<script>
  var point1 = new BMap.Point(116.404, 39.915);
  var point2 = new BMap.Point(116.404, 39.925);

  var polyline = new BMap.Polyline([point1, point2], {strokeColor:"red", strokeWeight:2, strokeOpacity:0.5});
  map.addOverlay(polyline);
</script>

4. 将地图内容导出为图片

通过 HTML2Canvas 将地图内容导出为图片。

<button onclick="exportMap()">导出地图</button>

<script>
function exportMap() {
  html2canvas(document.getElementById("map")).then(function(canvas) {
    var imgData = canvas.toDataURL("image/png");
    var img = new Image();
    img.src = imgData;
    document.body.appendChild(img);
  });
}
</script>

扩展功能

除了导出 PNG 格式图片外，还可以导出 SVG 格式的地图并转换为图片。

<button onclick="exportSVG()">导出 SVG</button>

<script>
function exportSVG() {
  var svg = document.getElementById("map").innerHTML;
  var canvas = document.createElement("canvas");
  canvg(canvas, svg);
  var imgData = canvas.toDataURL("image/png");
  var img = new Image();
  img.src = imgData;
  document.body.appendChild(img);
}
</script>