需求：在高德地圖中選擇分辨率并進(jìn)行截圖打印功能

?

1.引入高德地圖：

（1）安裝依賴(lài)

npm install vue-amap -S

? ? ? ? ?或者淘寶鏡像

cnpm install vue-amap --save

2.在main.js文件中引入

import VueAMap from 'vue-amap' Vue.use(VueAMap); // 初始化vue-amap VueAMap.initAMapApiLoader({key: '你的key',// 高德的key// 插件集合plugin: ['AMap.CircleEditor',// 圓形編輯器插件"AMap.Geolocation", // 定位控件，用來(lái)獲取和展示用戶主機(jī)所在的經(jīng)緯度位置"AMap.Geocoder", // 地理編碼與逆地理編碼服務(wù)，用于地址描述與坐標(biāo)間的相互轉(zhuǎn)換"AMap.Autocomplete","AMap.PlaceSearch","AMap.CitySearch",],// 高德 sdk 版本，默認(rèn)為 1.4.4v: '1.4.4' }); //高德的安全密鑰 window._AMapSecurityConfig = {securityJsCode:'你的安全密鑰', }

3.創(chuàng)建實(shí)例地圖并書(shū)寫(xiě)截圖打印

（1）主要代碼

?(2)完整代碼

<template><!-- 截圖打印 --><div class="equipment pipe"><el-amap vid="amapDemo" :center="center" :zoom="zoom" pitch-enable="false" :events="events":style="{ height: '600px' }" ref="map"><!--坐標(biāo)點(diǎn)--><el-amap-marker v-for="items in markers" :position="items.position" :key="items.id" :events="items.events":icon="items.icon"></el-amap-marker><!--信息窗體--><el-amap-info-window v-if="window" :position="window.position" :visible="window.visible" :content="window.content":offset="window.offset"></el-amap-info-window><!-- 劃線--><el-amap-polyline v-for="item in polyline" :path="item.path" :strokeColor="item.strokeColor" strokeStyle="solid"strokeWeight="4"></el-amap-polyline><!-- 遮罩層 --><el-amap-polygon strokeColor="#00eeff" strokeOpacity="1" fillColor="#71B3ff" fillOpacity="0.5"v-for="(polygon, index) in polygons" :key="index + 'polygons'" strokeWeight="2" :path="polygon.De.path"></el-amap-polygon><div class="conventionalSign"><h3>圖例</h3><ul><li><img src="../../assets/shuichang.png" alt="" style="width:24px;"><p>水廠</p></li><li><img src="../../assets/bengfang.png" alt="" style="width:24px;"><p>泵站</p></li><li><img src="../../assets/shuibiao.png" alt="" style="width:24px;"><p>電磁水表</p></li><li><img src="../../assets/biaojing.png" alt="" style="width:24px;"><p>表井</p></li><li><span class="abovePipeline"></span><p>泵站以上管線</p></li><li><span class="theFollowingPipelines"></span><p>泵站以下管線</p></li></ul></div><div class="rightSign"><el-select v-model="resolvingPower" placeholder="請(qǐng)選擇分辨率" @change="resolvingChange"><el-option v-for="item in resolvingPowerOptions" :key="item.value" :label="item.label" :value="item.value"></el-option></el-select><el-button type="primary" plain @click="getSignImg">點(diǎn)擊截取屏幕</el-button></div><div id="test" style="display: none;"></div></el-amap></div> </template> <script> // 地圖管線展示 import { pipeNetworkErrorCorrection } from "@/api/article"; // 在需要引用的頁(yè)面中調(diào)用 import html2canvas from 'html2canvas'; export default {data() {var that = this;return {tableData: [],currentPage4: 1,totalCount: 1,pageSize: 10,pageNo: 1,deviceName: "", //設(shè)備名稱(chēng)loading: true, //加載中l(wèi)istLoading: true,commandVisible: false,// 地圖相關(guān)內(nèi)容開(kāi)始xianPoint: [],// 縮放程度,值越大越詳細(xì)zoom: 11,// 中心點(diǎn)center: [114.919301, 37.619886],events: this.eventsFun(),polygons: [], // 繪畫(huà)的點(diǎn)district: null, // 行政區(qū)劃插件的對(duì)象strokeColorChange: "",viewMode: '3D',//使用3D視圖markers: [],windows: [],window: '',resolvingPowerOptions: [{value: '1',label: '1360<=分辨率<1440'}, {value: '2',label: '1440<=分辨率<1600'}, {value: '3',label: '1600<=分辨率<1680'}, {value: '4',label: '1680<=分辨率<1920'}, {value: '5',label: '分辨率<=1920'}],resolvingPower: '',canvaswidth: "",};},methods: {// 地圖事件eventsFun() {let that = thisreturn {// 地圖加載完成時(shí)執(zhí)行的方法complete() {// 畫(huà)地圖的遮罩層 that.drawBounds()// 泵站點(diǎn)位展示 that.pointNetMarker()// 管線展示that.pipeError();}}},// 選擇分辨率resolvingChange(val) {console.log(val)if (val == 1) {this.canvaswidth = 1.5;} else if (val == 2) {this.canvaswidth = 1.4;} else if (val == 3) {this.canvaswidth = 1.2;} else if (val == 4) {this.canvaswidth = 1.1;} else if (val == 5) {this.canvaswidth = 1;}},// 截圖打印功能getSignImg() {window.pageYOffset = 0;document.documentElement.scrollTop = 0;document.body.scrollTop = 0;html2canvas(document.getElementById('amapDemo'), // 要截圖的容器id{backgroundColor: null,//畫(huà)出來(lái)的圖片有白色的邊框,不要可設(shè)置背景為透明色（null）useCORS: true,//支持圖片跨域scale: this.canvaswidth,//設(shè)置放大的倍數(shù)}).then(canvas => {//截圖用img元素承裝，顯示在頁(yè)面的上let img = new Image();img.src = canvas.toDataURL('image/jpeg');// toDataURL :圖片格式轉(zhuǎn)成 base64document.getElementById('test').appendChild(img); // 這是看截圖的頁(yè)面承載，可以刪掉//如果你需要下載截圖，可以使用a標(biāo)簽進(jìn)行下載let a = document.createElement('a');a.href = canvas.toDataURL('image/jpeg');a.download = 'test';a.click();this.$message({message: '已截取屏幕',type: 'success'});})}} } </script>

(3)下載成功效果展示

就書(shū)寫(xiě)完成啦，加油

總結(jié)

以上是生活随笔為你收集整理的高德地图vue版本的截图打印功能的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。