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

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

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

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

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

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

<script type='text/javascript' src='https://www.haobala.com/uploads/202105/20/16214761171.0&ak=你的ak'></script>4、之后就可以随处使用我们的百度地图了：

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

<div class='map'></div>

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

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

// 百度地图API功能var map = new BMap.Map('map'); // 创建Map实例map.centerAndZoom(new BMap.Point(104.07258, 30.550701), 20); // 初始化地图,设置中心点坐标和地图级别//添加地图类型控件map.addControl( new BMap.MapTypeControl({ mapTypes: [BMAP_NORMAL_MAP, BMAP_HYBRID_MAP], }));map.setCurrentCity('成都'); // 设置地图显示的城市 此项是必须设置的map.enableScrollWheelZoom(true);

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

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

let point = new BMap.Point(104.07258, 30.550501);// 创建点标记var marker = new BMap.Marker(point);// 在地图上添加点标记map.addOverlay(marker);// 创建信息窗口var opts = { width: 200, height: 100, title: '弹窗标题',};var infoWindow = new BMap.InfoWindow( '弹窗内容', opts);// 点标记添加点击事件marker.addEventListener('click', function () { map.openInfoWindow(infoWindow, point); // 开启信息窗口});6、为坐标点添加文本标记：

//设置文本标记var opts2 = { position: point, // 指定文本标注所在的地理位置 offset: new BMap.Size(30, -30), // 设置文本偏移量};// 创建文本标注对象var label = new BMap.Label('成都书论技术有限公司', opts2);// 自定义文本标注样式label.setStyle({ color: 'blue', borderRadius: '5px', borderColor: '#ccc', padding: '10px', fontSize: '16px', height: '50px', lineHeight: '30px', fontFamily: '微软雅黑',});map.addOverlay(label);

以上就是如何在vue项目中使用百度地图API的详细内容，更多关于vue项目中使用百度地图API的资料请关注好吧啦网其它相关文章！