當(dāng)前位置：
首頁 >
vue项目实现高德地图截图
發(fā)布時(shí)間：2023/12/18
40
豆豆
生活随笔
收集整理的這篇文章主要介紹了
vue项目实现高德地图截图
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
項(xiàng)目背景：
uniapp開發(fā)app需用戶截取當(dāng)前地圖位置，作為附件上傳；奈何uniapp引入高德地圖太麻煩，直接使用webview標(biāo)簽嵌套map項(xiàng)目的方式實(shí)現(xiàn)。
實(shí)現(xiàn)步驟：
1、搭建vue項(xiàng)目過程忽略；
2、根據(jù)傳參自動(dòng)計(jì)算地圖區(qū)域大小（畢竟是app，就算是嵌套也得像是那回事）；
3、vue項(xiàng)目引入高德地圖
<!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>有個(gè)小坑：在html頁面中引入高德api的時(shí)候，要寫在head標(biāo)簽里，相當(dāng)于是宏任務(wù)，按順序，寫在前邊會(huì)優(yōu)先加載，否則地圖初始化方法等都會(huì)報(bào)錯(cuò)；
4、地圖方法書寫
<template><div id="map" :style="{width:width+'px',height:height+'px'}"></div> </template> <script> data(){return{ // 這些是動(dòng)態(tài)傳遞過來的參數(shù) width:'',height:'',longitude:'',latitude:''} }, // 處理從url傳遞過來的參數(shù) 直接調(diào)用取值就可以了 注意最后一個(gè)參數(shù) 后邊會(huì)有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 "";}},// 地圖初始化方法 直接調(diào)用就可以了mapInit() {this.map = new AMap.Map('map', {WebGLParams:{ // 這個(gè)方法一定要加上 不然截圖方法只能截個(gè)寂寞（空白頁面）preserveDrawingBuffer:true },resizeEnable: true,zooms: [4, 18],center: [this.longitude,this.latitude],zoom: 14, defaultCursor: 'pointer',})this.addMarker()} </script>5、截圖方法引入（這里用的是html2canvas）
引入方法通過npm安裝
官網(wǎng)Getting Started | html2canvas
npm i html2canvas --save// 在需要引用的頁面中調(diào)用 import html2canvas from 'html2canvas';6、開始截圖操作了
// 在頁面中找個(gè)元素綁定一個(gè)點(diǎn)擊事件 調(diào)用一下下邊方法 注意 getImg(){window.pageYOffset = 0;document.documentElement.scrollTop = 0;document.body.scrollTop = 0;html2canvas(document.getElementById('container'), // 要截圖的容器id{backgroundColor:null,//畫出來的圖片有白色的邊框,不要可設(shè)置背景為透明色（null）useCORS: true,//支持圖片跨域scale:1,//設(shè)置放大的倍數(shù)}).then(canvas => {//截圖用img元素承裝，顯示在頁面的上let img = new Image();img.src = canvas.toDataURL('image/jpeg');// toDataURL :圖片格式轉(zhuǎn)成 base64document.getElementById('test').appendChild(img); // 這是看截圖的頁面承載，可以刪掉//如果你需要下載截圖，可以使用a標(biāo)簽進(jìn)行下載let a = document.createElement('a');a.href = canvas.toDataURL('image/jpeg');a.download = 'test';a.click();})}好了，至此就實(shí)現(xiàn)了uniapp 安卓開發(fā)嵌套地圖，并實(shí)現(xiàn)截圖功能的要求。
獨(dú)樂了不如眾樂樂，分享使我快樂！
總結(jié)
以上是生活随笔為你收集整理的vue项目实现高德地图截图的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 数据库安全性存取控制机制
- 下一篇： 《Vue插件》瀑布流插件vue-maso