如何将百度导航的路线上传到服务器，下次导航相同的地址后可以直接调用？

Question

用百度导航过后的路线，怎样可以保存下来并上传到服务器端，当下次导航相同地点时可以直接调用？跪求各位大神给予解答，谢谢！

Answer 1

以下回答参考 皆我百晓生、券券喵儿 等免费微信小程序相关内容作答，并由本人整理回复。

要将百度地图导航路线上传到服务器，并在下次访问相同位置时自动加载，您需要使用一些JavaScript库和API。以下是一个简单的示例，展示了如何使用axios和html2canvas来实现这一功能：

1. 首先，确保安装了必要的依赖：

   npm install axios html2canvas --save
   

2. 在您的HTML文件中添加一个按钮（例如startBtn.js），用于启动地图加载。

3. 在startBtn.js文件中添加以下内容：

document.getElementById('startBtn').addEventListener("click", function() {
  var map = new BMap.Map("map");
  
  // 设置地图选项
  map.centerAndZoom(new BMap.Point(116.4045, 39.9157), 18);

  // 加载地图数据
  getBaiduRoute(map);
});

function getBaiduRoute(map) {
  // 将百度地图返回的json格式的数据转换为js对象
  let jsonObj = JSON.parse(map.getLayer('route').getData());

  // 创建一个新的画布实例
  let canvas = document.createElement('canvas');
  canvas.width = 300;
  canvas.height = 200;

  // 使用html2canvas将画布上的内容渲染到目标元素上
  html2canvas(canvas).then(function (canvas) {
    let imgDataUrl = canvas.toDataURL();
    
    // 使用axios发送请求并将图片数据上传到服务器
    axios.post('/upload', {img: imgDataUrl}, {
      headers: {
        'Content-Type': 'multipart/form-data'
      }
    }).then(response => {
      console.log('上传成功:', response.data);
    }).catch(error => {
      console.error('上传失败:', error);
    });
  });
}

这个脚本会创建一个新的画布实例，然后使用html2canvas将地图上的内容渲染到这个画布上。最后，它使用axios向服务器发送POST请求，将渲染后的图像数据作为参数。

注意：这只是一个基本的示例，实际应用可能需要处理更多的情况，比如错误处理、请求超时等。此外，由于涉及敏感信息（如用户坐标），您可能需要考虑对这些信息进行适当的加密或存储方式。