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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
本篇文章主要介绍了如何实现一个简单的 vuex，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-02-02
这篇文章主要介绍了Vue表单输入绑定的示例代码，本文使用v-model指令在表单input创建双向数据绑定，非常具有实用价值，需要的朋友可以参考下2018-11-11
Vue-JSON-Viewer 是一个用于在Vue项目中展示JSON数据的组件,它解决了在项目开发中面临的展示JSON数据的需求,下面就跟随小编一起来了解下它的具体使用吧2025-03-03
这次给大家带来vue-cli3.0配置详解，使用vue-cli3.0配置的注意事项有哪些？本文通过实战案例给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友参考下吧2018-09-09
这篇文章主要介绍了vue install 注册全局组件方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-03-03
这篇文章主要为大家详细介绍了vue.js的安装方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-05-05
使用el-select时一次性渲染几百条数据时会造成页面克顿, 可以通过分页来实现,所以本文给大家介绍了el-select二次封装实现可分页加载数据,文中有详细的代码讲解,具有一定的参考价值,需要的朋友可以参考下2023-12-12
Vue Router 提供了强大的路由管理能力,帮助开发者轻松构建流畅、高效的单页应用,本文将带你深入探讨 Vue3 中的路由配置与导航操作,从安装到实战,手把手教你掌握 Vue Router 的使用技巧,需要的朋友可以参考下2025-03-03
element ui中的table表格数据是动态生成的,最近遇到个需求,要求我们对单元格进行合并,所以下面这篇文章主要给大家介绍了关于Element UI中table单元格合并的解决过程,需要的朋友可以参考下2022-08-08
vue脚手架配置预渲染及prerender-spa-plugin配置方式
这篇文章主要介绍了vue脚手架配置预渲染及prerender-spa-plugin配置方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-05-05
最新评论