如何在前端vue项目中使用高德地图

1.百度搜索找到高德地图官方API

2.有账号直接登录没有账号需要注册一个账号

3.登录成功之后 选择控制台 找到我的应用 右上角点击添加应用 会生成你稍后要用到的key 和安全密钥 当然这都是免费的

4.完成之后返回首页找到 开发支持 web前端 地图js API

以上是准备工作,正式进入代码部分

1. 首先在项目有一个容器 并且给容器一定的大小,不然地图也不会显示的哦,当然这个大小根据你的实际需求来设置,我这里只是方便演示随便设置的

2. js部分 我首先需要安装高德的依赖包

npm方式:npm i @amap/amap-jsapi-loader --save
yarn方式:yarn add @amap/amap-jsapi-loader --save
...

3. 引入高德地图依赖包

4. 在methods中声明一个初始化地图的函数

5. 加载地图插件版本配置等信息,并且把准备时候的申请的key填写在这里

6. 这里我把地图初始的位置放在刚才声明好的容器里面,并且配置地图的相关信息,比如开启3D,中心点位置等等

到这高德地图已经成功的展示在你的页面了,是不是很好奇别人的地图都需要标点,为啥我的没有别着急,我们继续

1. 我们就在下面创建一个maker(标点),并加载到地图上去,当然我们也可以添加多个,创建maker势力list就行,并把创建的 maker 的 list 数组添加到地图中

2. 在这里我们还要为大家添加每个maker点的点击事件,并且携带你需要的数据

好了到这里基本上正常开发需要的需要的就结束了,是不是非常简单,后续还需要什么新功能欢迎在评论区留言,看到第一时间更新,觉得不错点个赞加个关注呗,互粉互黑都可以哈

最后如果我们想要在搞的地图中使用自定义地图样式 做两个地方的配置即可,如下

第一个配置

第二个配置

1.首先你得先生成到你的自定义地图的样式id

2.将你生成的样式id添加到地图中

这样就完成了,去你的页面看有没有加载出你自己的制作的高德地图样式。