vue项目实现高德地图截图
生活随笔
收集整理的這篇文章主要介紹了
vue项目实现高德地图截图
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
項目背景：
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 :圖片格式轉成 base64document.getElementById('test').appendChild(img); // 這是看截圖的頁面承載，可以刪掉//如果你需要下載截圖，可以使用a標簽進行下載let a = document.createElement('a');a.href = canvas.toDataURL('image/jpeg');a.download = 'test';a.click();})}好了，至此就實現了uniapp 安卓開發嵌套地圖，并實現截圖功能的要求。
獨樂了不如眾樂樂，分享使我快樂！
總結
以上是生活随笔為你收集整理的vue项目实现高德地图截图的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 数据库安全性存取控制机制
- 下一篇： 《Vue插件》瀑布流插件vue-maso