vue项目实现高德地图截图

最新推荐文章于 2024-05-10 14:30:11 发布

giveMe_Five

最新推荐文章于 2024-05-10 14:30:11 发布

阅读量1.8k

点赞数

文章标签： vue.js 前端

本文链接：https://blog.csdn.net/giveMe_Five/article/details/122540213

版权

项目背景：

uniapp开发app需用户截取当前地图位置，作为附件上传；奈何uniapp引入高德地图太麻烦，直接使用webview标签嵌套map项目的方式实现。

实现步骤：

1、搭建vue项目过程忽略；

2、根据传参自动计算地图区域大小（毕竟是app，就算是嵌套也得像是那回事）；

3、vue项目引入高德地图

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
    <style>
      html,body{
        margin: 0;
        padding: 0;
      }
    </style>
    <script src="https://webapi.amap.com/maps?v=2.0&key=你自己的key"></script>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

有个小坑：在html页面中引入高德api的时候，要写在head标签里，相当于是宏任务，按顺序，写在前边会优先加载，否则地图初始化方法等都会报错；

4、地图方法书写

<template>
    <div id="map" :style="{width:width+'px',height:height+'px'}"></div>
</template>
<script>
data(){
    return{
// 这些是动态传递过来的参数 
        width:'',
        height:'',
        longitude:'',
        latitude:''
    }
},
// 处理从url传递过来的参数 直接调用取值就可以了 注意最后一个参数 后边会有vue 历史模式 '#/'的干扰情况
    GetUrlParam(paraName){
      var url = sessionStorage.getItem('href').toString();
        var arrObj = url.split("?");
        if (arrObj.length > 1) {
            var arrPara = arrObj[1].split("&");
            var arr;
            for (var i = 0; i < arrPara.length; i++) {
                arr = arrPara[i].split("=");
                if (arr != null && arr[0] == paraName) {
                    return arr[1];
                }
            }
            return "";
        }
        else {
            return "";
        }
    },
    // 地图初始化方法 直接调用就可以了
    mapInit() {
				   this.map = new AMap.Map('map', {
                      WebGLParams:{ // 这个方法一定要加上 不然截图方法只能截个寂寞（空白页面）
                           preserveDrawingBuffer:true 
                      },
					resizeEnable: true,
					zooms: [4, 18],
					center: [this.longitude,this.latitude],
					zoom: 14, 
					defaultCursor: 'pointer',
				})
                   this.addMarker()
			}
</script>

5、截图方法引入（这里用的是html2canvas）

引入方法通过npm安装

官网Getting Started | html2canvas

npm i html2canvas --save

// 在需要引用的页面中调用
import html2canvas from 'html2canvas';

6、开始截图操作了

// 在页面中找个元素绑定一个点击事件 调用一下下边方法 注意
getImg(){
        window.pageYOffset = 0;
        document.documentElement.scrollTop = 0;
        document.body.scrollTop = 0;

        html2canvas(
          document.getElementById('container'), // 要截图的容器id
          {
            backgroundColor:null,//画出来的图片有白色的边框,不要可设置背景为透明色（null）
            useCORS: true,//支持图片跨域
            scale:1,//设置放大的倍数
          }
        ).then(canvas => {
          //截图用img元素承装，显示在页面的上
          let img = new Image();
          img.src = canvas.toDataURL('image/jpeg');// toDataURL :图片格式转成 base64
          document.getElementById('test').appendChild(img); // 这是看截图的页面承载，可以删掉
      
          //如果你需要下载截图，可以使用a标签进行下载
          let a = document.createElement('a');
          a.href = canvas.toDataURL('image/jpeg');
          a.download = 'test';
          a.click();
        })
      }

好了，至此就实现了uniapp 安卓开发嵌套地图，并实现截图功能的要求。

独乐了不如众乐乐，分享使我快乐！

giveMe_Five

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
vue项目实现高德地图截图

项目背景：uniapp开发app需用户截取当前地图位置，作为附件上传；奈何uniapp引入高德地图太麻烦，直接使用webview标签嵌套map项目的方式实现。实现步骤：1、搭建vue项目过程忽略；2、根据传参自动计算地图区域大小（毕竟是app，就算是嵌套也得像是那回事）；3、vue项目引入高德地图<!DOCTYPE html><html lang=""> <head> <meta charset="utf-8">
复制链接

扫一扫