百度地图篇

2021-06-29 16:32:50 阅读：199 来源： 互联网

标签：baidu map name 地图 label BMap new 百度

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

百度地图篇