欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

如何在vue项目中使用百度地图API

程序员文章站 2022-07-02 12:06:47
1、在百度地图开放平台注册账号并登录  网址:http://lbsyun.baidu.com/index.php?title=jspopulargl2、选择自己所需的地图版本:  我个人使用2...

1、在百度地图开放平台注册账号并登录

  网址:http://lbsyun.baidu.com/index.php?title=jspopulargl

2、选择自己所需的地图版本:

  我个人使用2.0足够了,其实就是懒,一直用的2.0没看3.0。但是3.0应该也差不多的使用。

如何在vue项目中使用百度地图API

3、在我们的vue项目中的public文件夹下的index.html中引入并记得替换上你的ak(这个ak不是其他的ak哈)

4、之后就可以随处使用我们的百度地图了:

 在我们需求的页面组件中添加地图容器:

这里的class用来定义大小、布局等样式操作;重要的是id值map。

一般我们会在组件加载,也就是页面渲染时加载我们的地图,所以我们可以在mounted阶段添加我们的核心代码:

这样就在页面显示出来了我们的百度地图,记得css中添加宽高!!

5、标记点的添加并拥有点击弹窗效果:

6、为坐标点添加文本标记:

以上就是如何在vue项目中使用百度地图api的详细内容,更多关于vue项目中使用百度地图api的资料请关注其它相关文章!