高德地图vue版本的截图打印功能

耳东君呐

已于 2022-12-22 14:38:28 修改

阅读量1.4k

点赞数 1

分类专栏：前端文章标签： vue.js 前端 javascript

于 2022-12-22 14:37:24 首次发布

本文链接：https://blog.csdn.net/chenchang0419/article/details/128408252

版权

本文介绍了如何在Vue.js应用中结合高德地图实现选择分辨率后进行截图打印的功能。首先通过安装依赖并引入高德地图，然后在main.js中配置。接着详细展示了创建地图实例的关键代码，包括完整示例代码，最终呈现了截图打印的成功效果。

摘要由CSDN通过智能技术生成

需求：在高德地图中选择分辨率并进行截图打印功能

1.引入高德地图：

（1）安装依赖

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", // 定位控件，用来获取和展示用户主机所在的经纬度位置
        "AMap.Geocoder", // 地理编码与逆地理编码服务，用于地址描述与坐标间的相互转换
        "AMap.Autocomplete",
        "AMap.PlaceSearch",
        "AMap.CitySearch",
    ],
    // 高德 sdk 版本，默认为 1.4.4
    v: '1.4.4'
});
//高德的安全密钥
window._AMapSecurityConfig = {
    securityJsCode:'你的安全密钥',
}

3.创建实例地图并书写截图打印

（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">
      <!--坐标点-->
      <