百度地图的基本使用1.拾取坐标系统：http://api.map.baidu.com/lbsapi/getpoint/i

1.拾取坐标系统：api.map.baidu.com/lbsapi/getp…
2.百度地图开放平台：lbsyun.baidu.com/jsdemo.htm

vue中如何使用百度地图
1.下载百度地图包 vue-baidu-map
npm i vue-baidu-map --save \

2.在对应网页的main.js中引用百度地图
import BaiduMap from ‘vue-baidu-map’
Vue.use(BaiduMap, {
ak: 你的密钥’
})\

3.在页面中使用
<baidu-map @ready=“handler” :scroll-wheel-zoom=‘true’ style=“width:95%;height:95%;margin:10px auto 0;”>
export default {
name: ‘home-map-index’,
data() {
return {}
},
methods: {
handler({ BMap, map }) {
var point = new BMap.Point(116.319769, 39.976546)
map.centerAndZoom(point, 18)
// 如有多个point去展示，可根据后端接口传入为主
let data = [ { x: 116.314473, y: 39.977798, name: 'A楼 15个', detail: 'A验,B,C,D,E,F,E,F' }, data.forEach((e, i) => {
// 创建point, 将x,y值传入 let pointNumber = new BMap.Point(e.x, e.y)

// 创建信息窗口对象
let infoWindow = new BMap.InfoWindow(e.detail, {
  // 信息窗口宽度
  width: 150,
  // 信息窗口高度
  height: 100,
  // 信息窗口标题
  title: '实验室名称：'
})
// 将data中的name加入地图中
var label = new BMap.Label(e.name, {
  offset: new BMap.Size(-25, -15)
})
label.setStyle({
  color: '#f42a47',
  borderColor: '#ccc',
  borderRadius: '3px',
  height: '16px',
  lineHeight: '16px',
  padding: '2px'
})
markerFun(pointNumber, infoWindow, label)

})

function markerFun(points, infoWindows, label) {
let markers = new BMap.Marker(points)
// 将标注添加到地图中
map.addOverlay(markers)
// 将data中的name添加到地图中
markers.setLabel(label)
// 标注的点击事件
markers.addEventListener('click', function (event) {
// 参数：窗口、点根据点击的点出现对应的窗口
map.openInfoWindow(infoWindows, points)
}) } } }