百度地图篇

1.拾取坐标系统：http://api.map.baidu.com/lbsapi/getpoint/index.html
2.百度地图开放平台：https://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)
    })
  }
}
  }

}

标签：baidu,map,name,地图,label,BMap,new,百度
来源： https://blog.csdn.net/zy690811/article/details/118337706