vue项目中使用百度地图API 怎样在vue项目中使用百度地图API（vue调用百度地图api）

想了解怎样在vue项目中使用百度地图API的相关内容吗，超华在本文为您仔细讲解vue项目中使用百度地图API的相关知识和一些Code实例，欢迎阅读和指正，我们先划重点：vue,使用api,vue,百度地图api，下面大家一起来学习吧。

<script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=你的ak"></script>

<div id="map" ></div>

// 百度地图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);

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);