三分钟帮你在vue项目下解决地图的使用

前序准备

学习了解本文章时你需要提前，了解过或使用过 vue、 es6、 npm市场。
本次的讲解将会基于高德地图官方推出的amap-jsapi-loader包

高德地图开放平台

高德的官方api文档，这个是必须要看的啦！不然你做锤子的地图，是吧！

---

第一步（默认你已经建好了一个vue项目）

在你的项目中下载amap-jsapi-loader ,下载命令npm i @amap/amap-jsapi-loader安装好后接着我这里的 或者npm包的那个介绍，里面有使用方法，这里我就搬点会用到的过来

//某个js文件下  或者vue文件的script标签里面
import AMapLoader from '@alife/amap-jsapi-loader';


//个人说明 AMapLoader .load()这个函数可以创建出高德地图的实例，包括某些地图的参数
AMapLoader.load({
    "key": "youkey",     // 申请好的Web端开发者Key，首次调用 load 时必填
    "version": "2.0",   // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    "plugins": []           // 需要使用的的插件列表，如比例尺'AMap.Scale'等
    "AMapUI": {             // 是否加载 AMapUI，缺省不加载
        "version": '1.1',   // AMapUI 缺省 1.1
        "plugins":[],       // 需要加载的 AMapUI ui插件
    },
    "Loca":{                // 是否加载 Loca， 缺省不加载
        "version": '1.3.2'  // Loca 版本，缺省 1.3.2
    },
})

特别注意：AMapLoader.load这个函数返回的是一个promis对象，记得使用then

---

第二步（初次体验 vue文件下）

现在我们创建一个vue文件，当然你可以随意在一个vue文件下。

好了，你现在可以看到一个地图在项目上了 记得填key值

这是我项目上的截图

---

第三步，自己写的，感觉用的很好

上面有说过AMapLoader.load这个函数是一个promis对象，此时接触了怎么多vue项目的你，肯定会反应出 promis?那不就是api！api?那不就是抛出一个方法的js文件！
很好，js文件抛出一个方法就这样写出来了，就像写api一样轻松

import AMapLoader from "@amap/amap-jsapi-loader";

export function initMap() {
    return AMapLoader.load({
        key: "yourKey", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "1.4.15", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
        AMapUI: {
            // 是否加载 AMapUI，缺省不加载
            version: "1.1", // AMapUI 缺省 1.1
            plugins: [], // 需要加载的 AMapUI ui插件
        },
        Loca: {
            // 是否加载 Loca， 缺省不加载
            version: "1.3.2", // Loca 版本，缺省 1.3.2
        },
    })
}

我把这个文件放到了utils/下并且命名为initamap.js
然后关于地图的实例所有的参数，就可以在这个文件下去编写。
根据amap-jsapi-loader写实例的参数
js抛出文件有了，下一步不用说也是vue文件引入啦

温馨提示：new AMap .Map("container")中的container是你templant标签里面 map 容器的id类名，同时这个盒子记得设置宽高

---

到了这里 你就可以根据高德地图的例子cv东西了

我这里以三维地图的3D地图为例子

看到官方例子的js怎么写了吗，是不是和我将实例提出来很像？像就对了！
二话不说，将上面的搬下来

发现差异了吗？我只需要将官方api例子里的js代码cv过来就ojbk了。至此地图对你来说就是翻官方的api例子就行了。同时你也学会了在vue中使用高德地图的所有方法。