小编给大家分享一下怎么在vue项目中使用百度地图API，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！
Vue是一款友好的、多用途且高性能的JavaScript框架，使用vue可以创建可维护性和可测试性更强的代码库，Vue允许可以将一个网页分割成可复用的组件，每个组件都包含属于自己的HTML、CSS、JavaScript，以用来渲染网页中相应的地方，所以越来越多的前端开发者使用vue。
网址：http://lbsyun.baidu.com/index.php?title=jspopularGL
我个人使用2.0足够了，其实就是懒，一直用的2.0没看3.0。但是3.0应该也差不多的使用。
计算
安全
数据库
网络和加速
企业服务
<script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=你的ak"></script>在我们需求的页面组件中添加地图容器：
<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中添加宽高！！
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); // 开启信息窗口
});//设置文本标记
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”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
