vue项目引入百度地图,vue做地图
本文主要介绍如何在vue项目中使用百度地图API，帮助大家更好的理解和学习使用vue框架。感兴趣的朋友可以了解一下。
:
目录
1.注册账号，登录百度地图开放平台。2.选择您需要的地图版本。3.介绍并记住在我们的vue项目的公共文件夹下替换你在index.html的ak。4.之后，你可以在任何地方使用我们的百度地图。5.添加标记并点击弹出窗口。6.为坐标点添加文本标记。
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.0ak=您的AK /脚本
4、之后就可以随处使用我们的百度地图了：
向我们的需求的页面组件添加一个地图容器：
div id=map class=map/div
这里的类用于定义大小、布局等样式操作；重要的是id值图。
通常，我们会在加载组件时加载地图，也就是在呈现页面时，因此我们可以在挂载阶段添加核心代码：
//百度地图API函数
var map=新的BMap。map( map )；//创建一个映射实例
map.centerAndZoom(新的BMap。点(104.07258，30.550701)，20)；//初始化地图，设置中心点坐标和地图级别。
//添加地图类型控件
map.addControl(
新的BMap。MapTypeControl({
地图类型：[BMAP正常地图，BMAP混合地图]，
})
);
Map.setCurrentCity(成都)；//设置地图上显示的城市。必须设置此项。
map . enablescrollwheelzoom(true)；
这样，我们的百度地图就展现在页面上了。记得在css中添加宽度和高度！
5、标记点的添加并拥有点击弹窗效果：
让点=新的BMap。点(104.07258，30.550501)；
//创建一个点标记
var标记=新的BMap。标记(点)；
//在地图上添加点标记
map . add overlay(marker)；
//创建一个信息窗口
var opts={
宽度：200，
身高：100，
标题：“弹出标题”，
};
var infoWindow=new BMap。信息窗口(
弹出内容，
选择
);
//添加click事件的点标记
marker.addEventListener(click ，function () {
map.openInfoWindow(infoWindow，point)；//打开信息窗口
});
6、为坐标点添加文本标记：
//设置文本标记
var opts2={
Position: point，//指定文本标签的地理位置。
偏移量：新的BMap。Size(30，-30)，//设置文本偏移量
};
//创建文本注释对象
Var=newbmap.label(成都书论科技有限公司，opts 2)；
//自定义文本批注样式
label.setStyle({
颜色：蓝色，
borderRadius:“5px”，
边框颜色：“#ccc”，
填充：“10px”，
fontSize: 16px ，
高度：“50px”，
行高：“30px”，
字体：微软雅黑，
});
map.addOverlay(标签)；
百度地图API在vue项目中的使用方法就是这样。更多关于在vue项目中使用百度地图API的信息，请关注我们的其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。