高德地图开发+html2canvas地图截图--vue2

前言

vue2保姆级的高德地图开发步骤，从npm引入到地图截图全过程，没有讲解，直接跟着cv就完事

准备工作

高德地图开发者注册

官网网址：https://lbs.amap.com/

因为我已经创建好了，而且这一步如果在公司，可以最好使用公司的账号，这一步我就不演示了

高德2.0新增

创建完后就拥有了key和密钥，这是后面创建地图所必须得

vue2项目 npm引入高德地图

api官网地址：https://lbs.amap.com/api/javascript-api-v2/guide/abc/jscode

安装

npm i @amap/amap-jsapi-loader --save

创建承载地图的vue文件（按需创建）

创建地图容器

在 MapContainer.vue 地图组件中创建一个div作为地图容器，并设置该div的 id 属性为 container。
div的id不是固定的，自定义，你想叫什么都行，只有后面初始化才会用到

给地图设置样式（宽高大小）

因为我这里没有很多样式，所以没有用lang="scss"

script 中引入 AMapLoader

1.import引入

2.引入安全密钥

window._AMapSecurityConfig = {
    securityJsCode: "安全密钥",//你自己的安全密钥，去复制放进来
};

3.完整代码

import AMapLoader from "@amap/amap-jsapi-loader";
window._AMapSecurityConfig = {
    securityJsCode: "安全密钥",
};

4.初始化map

export default {
    data() {
        return {
            map: null,
        }
    }
}

5.创建地图
methods中构建创建地图的方法initMap()

methods:{
    initMap(){
        AMapLoader.load({
            key:"",             // 申请好的Web端开发者Key，首次调用 load 时必填
            version:"2.0",      // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
            plugins:[''],       // 需要使用的的插件列表，如比例尺 ["AMap.Scale","AMap.MapType"]等
        }).then((AMap)=>{
            this.map = new AMap.Map("container",{  //设置地图容器id
                viewMode:"3D",    //是否为3D地图模式
                zoom:5,           //初始化地图级别
                center:[105.602725,37.076636], //初始化地图中心点位置
            });
        }).catch(e=>{
            console.log(e);
        })
    },
},

6.mouted生命周期中调用

mounted() {
        this.initMap();
    },

完整代码

父组件中调用（我是全局引入的组件在main.js）

1.

import Location from './location/index.vue'

2.

//地图组件
Vue.component("Location", Location);

3.在需要用的地方使用

到这一步地图就可以显示了！！！

接下来是做地图控件了

地图控件的api网址

网站：https://lbs.amap.com/api/javascript-api-v2/documentation#control

1.控件的使用（因为我用的是vue2的语法）
关键语法：

this.map.addControl(new AMap.xxxx());

2.在initMap的函数load中的plugins:[]添加控件

plugins: [
            "AMap.Scale", //比例尺控件
            "AMap.MapType", //地图类型切换插件
            "AMap.Geolocation", //定位服务插件
],

3.在.then的回调函数中注册

我这里的center的经纬度是定义在data中的

.then((AMap) => {
                    this.map = new AMap.Map("container"//设置地图容器id, {
                        viewMode: "3D", //是否为3D地图模式
                        zoom: 18, //初始化地图级别
                        center: [this.lng, this.lat], //初始化地图中心点位置
                    });
                    this.map.addControl(new AMap.Scale());//这里就是注册控件的方法
                    this.map.addControl(new AMap.MapType());
                    this.map.addControl(new AMap.Geolocation());
})

现在来做地图截图(我做的是web端的)

1.我这里是创建了一个button按钮来做截图（我用的是element的）我就直接上代码了
这个是tamplate的代码，我用的定位，样式你们可以自己调一下

 
     
     保存为图片