使用vue-baidu-map开发地图找房的总结

Posted 2021-02-14 nanacln

html相关代码：

<baidu-map class="bm-view" :center="center"  :style="{height:mapHeight+‘px‘}" :zoom="zoom" @ready="handler" @moveend="moveEnd" ak="SvVTMGOPXvHry8MXfpjiUGwR">
      <my-overlay
        v-for="(item,index) in regionData"
        :key="index"
        :zoom="zoom"
        type="1"
        @touchstart.native="click"
        :baseinfo="item">
      </my-overlay>
      <station-overlay
        v-for="(item,index) in stationData"
        :key="item.id"
        :zoom="zoom"
        :index="index"
        :baseinfo="item">
      </station-overlay>
      <house-overlay
        v-for="(item,index) in houseData"
        :key="index.id"
        :index="index"
        :curIndex="detailCur"
        :zoom="zoom"
        :baseinfo="item">
      </house-overlay>
    </baidu-map>

 

1、需求1产品要求地图向上移时，筛选标签隐藏，向下移时筛选标签显示。实现此功能需要监听center的lat。

　　我开始的错误做法，在moveEnd的方法里使用

　　this.center=this.map.getCenter()

　　然后使用watch深度监听center。这个需求倒是满足了，但是引出了大bug。每次地图移动都会请求数据生成覆盖物，这样会导致覆盖物的定位错乱。

　　正确做法，在moveEnd的方法里使用

　　this.center1==this.map.getCenter() 

　　监听center1就不会产生覆盖物定位错乱的不过

2、使用vue-bai-map时在移动端，自定义覆盖物的点击事件会失效。为解决这个bug需要在ready里添加如下代码

　　

handler ({BMap, map}) {
      this.BMap = BMap
      this.map = map
      let _this = this
      // 地图的点击事件
      map.addEventListener(‘click‘, function (e) {
        console.log(‘map   clllllllick‘)
        _this.detailCur = -1
      })
      map.addEventListener(‘touchmove‘, function () {
        map.enableDragging()
      })
      // TODO: 触摸结束时触发次此事件  此时开启禁止拖动
      map.addEventListener(‘touchend‘, function () {
        map.disableDragging()
      })
      map.disableDragging()

    }

 

2.产品要求当选择地铁线路时，要将地铁线路加粗描红，代码实现如下

　　

handler ({BMap, map}) {
      this.BMap = BMap
      this.map = map
      let _this = this
      // 地图的点击事件
      map.addEventListener(‘click‘, function (e) {
        console.log(‘map   clllllllick‘)
        _this.detailCur = -1
      })
      map.addEventListener(‘touchmove‘, function () {
        map.enableDragging()
      })
      // TODO: 触摸结束时触发次此事件  此时开启禁止拖动
      map.addEventListener(‘touchend‘, function () {
        map.disableDragging()
      })
      map.disableDragging()
      // 绘制地铁线路
      /* eslint-disable */
      this.busline = new BMap.BusLineSearch(map,{
        renderOptions: {},
        onGetBusListComplete: function(result){
          if(result) {
            var fstLine = result.getBusListItem(0);
            _this.busline.getBusLine(fstLine);
          }
        },
        onGetBusLineComplete: function(result){
          var i = result.getNumBusStations()
                , a = Math.floor(i / 2)
                , c = result.getBusStation(a);
          var position = result.position;
          var e = result.getPolyline();
          e.setStrokeColor("#D22020"),
          e.setStrokeOpacity(1),
          e.setStrokeWeight(6);
          map.addOverlay(e)
        }
      })
      /* eslint-disable */
    },
    busSearch(){
      this.busline.getBusList(this.metroLineName);
    }