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 = "//api.map.baidu.com/api?v=2.0&ak=你的ak" ></ script >
4、之后就可以随处使用我们的百度地图了：
在我们需求的页面组件中添加地图容器：
< div id = "map" 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的资料请关注服务器之家其它相关文章！
原文链接：https://www.cnblogs.com/wacheer/p/14659319.html
dy("nrwz");
查看更多关于如何在vue项目中使用百度地图API的详细内容...