Vue项目中使用百度地图api的详细步骤
更新时间：2022年10月28日 11:28:48 作者：至尊绝伦
在之前的一个小项目中,用到的显示当地的地图功能,下面这篇文章主要给大家介绍了关于Vue项目中使用百度地图api的详细步骤,文中通过图文介绍的非常详细,需要的朋友可以参考下
1.百度开发者认证
进入百度地图开放平台 官网，（认证需要身份证号码，人脸识别，手机百度APP，邮箱地址）
注册登录完成，在控制台可以进行开发者认证。
2.创建应用
在应用管理中可以创建应用，应用类型需要选择浏览器端，Referer白名单如果只是测试版本，可以先使用*，只有该白名单中的网站才能成功发起调用。
创建完成就会生成一个AK。
3.引用百度地图API文件
在JavaScript开放文档中有教程，可以根据教程来引用。
如果我们要在vue中使用，我们需要将这代码段放到html文件中。
<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&&type=webgl&ak=您的密钥"> </script>
需要修改里面的ak值，就是上面创建应用生成的ak值。
4.展示地图
展示地图也有一个demo可供学习。
如果在vue中的index.html中引入api之后，在项目中就可以使用了。
var map = new BMapGL.Map("container"); // 创建地图实例
var point = new BMapGL.Point(116.404, 39.915); // 创建点坐标
map.centerAndZoom(point, 15); // 初始化地图，设置中心点坐标和地图级别
这是使用的案例，有几个需要注意的事项：
- 要把这段代码放到Mounted生命周期里面；
- 要拿到展示地图的那个实例，可以用ref拿到；
- 设置展示地图的实例的宽高；
- 创建点坐标可以修改。
至此，简单使用百度地图API已经完成了。
总结
到此这篇关于Vue项目中使用百度地图api的文章就介绍到这了,更多相关Vue使用百度地图api内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
最近开发遇到一个点击导入按钮让excel文件数据导入在表格的需求,所以下面这篇文章主要给大家介绍了关于vue导入处理Excel表格功能步骤的相关资料,需要的朋友可以参考下2022-07-07
这篇文章主要介绍了Vue表单提交点击事件只允许点击一次的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-10-10
使用vue-router与v-if实现tab切换遇到的问题及解决方法
这篇文章主要介绍了vue-router与v-if实现tab切换的思考,需要的朋友可以参考下2018-09-09
Vue初始化中的选项合并之initInternalComponent详解
这篇文章主要介绍了Vue初始化中的选项合并之initInternalComponent的相关知识，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-06-06
这篇文章主要为大家详细介绍了Vue+Echarts实现简单折线图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
vue在 for 循环里使用异步调用 async/await的方法
大家都遇到这样的问题,在使用函数的async/await异步调用时候,放在正常函数中单个调用时没有问题的,但是await放在forEach()循环里面就会报错,本文给大家介绍vue 如何在 for 循环里面使用异步调用 async/await,感兴趣的朋友一起看看吧2023-10-10
这篇文章主要介绍了Vue与React的区别和优势对比，帮助大家更好的选择适合自己的前端框架，迷茫的同学可以进来参考下2020-12-12
动态实现element ui的el-table某列数据不同样式的示例
这篇文章主要介绍了动态实现element ui的el-table某列数据不同样式的示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-01-01
在 Vue.js 开发中,合理地控制元素的样式对于构建高质量的用户界面至关重要,Vue 提供了灵活的方式来绑定样式,这篇文章将探索 Vue 中设置样式的七种做法,并结合代码,逐步说明每种方法的实现,需要的朋友可以参考下2024-03-03
这篇文章主要为大家详细介绍了Vue实现下拉加载更多，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-05-05
最新评论