vue 引入百度地图

先看下效果图吧,一眼望去比较直观,也能知道是不是自己想要的效果
在这里插入图片描述
接下来就是开始开发的过程啦~~~
首先是 HTML(其实就是一个 div 搞定),具体的样式根据自己的情况画吧

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

接下来是js 的相关操作啦~
1、安装依赖

 npm install vue-baidu-map --save

2、在main.js文件中全局引入百度地图
也可以用 script 引入

  <script type="text/javascript" src="http://api.map.baidu.com/api?type=webgl&v=3.0&ak=你的ak"></script>
 // 2.0版本
import BaiduMap from 'vue-baidu-map'

// 3.0 版本需要把node-modules下 vue-bai-map 的组件放到自定义的文件中再引入(如下图)
import BaiduMap from '@/components/baidu-map/components'

Vue.use(BaiduMap, { ak: '你已经申请的ak' });

在这里插入图片描述在这里插入图片描述
3、创建地图实例(自定义样式需要使用到个性化地图:https://lbsyun.baidu.com/index.php?title=jspopularGL/guide/custom)

 import mapStyle from './map_style'   // 引入自定义样式文件

  mounted() {
      this.map = new BMapGL.Map('map', {
        enableRotate: false
      });
      this.map.setMapStyleV2({ styleJson: mapStyle });  // 设置自定义样式
      this.map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
      var point = new BMapGL.Point(116.404, 39.915);  // 设置中心点坐标 
	  var marker = new BMapGL.Marker(point);        // 创建标注   
	  this.map.addOverlay(marker);                     // 将标注添加到地图中
    },
methods:{
// 拿到后端返回的所有经纬度后存起来,后续做点的创建标记
 	calcLifeCircleLocation() {
        this.border1 = []
        let top = 0, bottom = 9999, left = 9999, right = 0
        this.polygonList.forEach((point) => {
          let longitude = Number(point.longitude);
          let latitude = Number(point.latitude);
          if (longitude < left) {
            left = longitude
          }
          if (longitude > right) {
            right = longitude
          }
          if (latitude > top) {
            top = latitude
          }
          if (latitude < bottom) {
            bottom = latitude
          }

          let northLat = this.northMove(latitude)
          this.border1.push(new BMapGL.Point(longitude, latitude));
        })
        // 计算生活圈中心点
        this.lifeCircleCenter.lon = (right - left) / 2 + left;
        this.lifeCircleCenter.lat = (top - bottom) / 2 + bottom;
      },
	 // 在地图上标记所有的经纬度的点
      drawPoint() {
        let map = this.map, arrayList = this.arrayList, _this = this
        arrayList.forEach((item, index) => {
          let itemObj = item
          const bPoint = new BMapGL.Point(item.longitude, item.latitude); // 创建点
          var myIcon = new BMapGL.Icon(this.findFacilityIcon(item.facilitiesId), new BMapGL.Size(24, 31), { anchor: new BMapGL.Size(12, 31) });  // 设置点图片
          var iconImg = new BMapGL.Marker(bPoint, { icon: myIcon });
          // 将标注添加到地图中
          map.addOverlay(iconImg); // 在地图上显示icon图片

          var html = ''
          for (let i = 0; i < itemObj.extendList.length; i++) {
            html += `<p style="white-space: normal;">${ itemObj.extendList[i].propertyName }:${ itemObj.extendList[i].propertyValue }</p>`;
          }
          var content = ` <div class="introduce" id="label-item${ index }">
              <p class="label" style="white-space: normal;">${ itemObj.name }</p>
              <div class="cont-extend" id="cont-extend">`
            + html + `<br/>` +
            ` </div>
               <div class="btn">
                <button >关闭</button>
              </div>
            </div>`;
          var label = new BMapGL.Label(content, {       // 创建文本标注
            position: bPoint,                          // 设置标注的地理位置
            offset: new BMapGL.Size(10, 20)           // 设置标注的偏移量
          })

          var style = {
            backgroundColor: 'transparent',
            width: '360px',
            backgroundRepeat: 'no-repeat',
            backgroundSize: '100% 100%',
            padding: '19px 23px',
            border: 0,
            display: 'none'
          }
          map.addOverlay(label);   // 设置标注框样式,有的样式主要配合css才能实现(例如背景图片)
          label.setStyle(style);

          iconImg.addEventListener('click', function () {    // 创建点击事件
            if (_this.prevLabel) {
              _this.prevLabel.setStyle({
                display: 'none'
              })
            }
            label.setStyle({
              display: 'block'
            })
            let btnClick = document.querySelector(`#label-item${ index } .btn button`)
            // let imgClick = document.querySelector(`#label-item${ index } img`)
            btnClick.onclick = () => {
              label.setStyle({
                display: 'none'
              })
            }
            _this.prevLabel = label   // 记录上一个标注点、在点击当前标注框的时候关闭上一个
          })
        })
      },
}

注: 在切换选择器数据时需要清楚地图上的点再重新标记
this.map.clearOverlays();
// 彩蛋:切换tab时滚到对应的tab-item位置上的效果
        document.querySelector('#points-item' + this.typeIndex).scrollIntoView({ block: 'center' });
 /*// 去除百度地图水印*/
 .anchorBL {
   /*//在全局样式css中添加*/
   display: none;
 }
 .BMap_cpyCtrl span {
    display: none;
  }

好了,大致就这样,有问题需要帮助的请留言~~

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值