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

Posted nanacln

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了使用vue-baidu-map开发地图找房的总结相关的知识,希望对你有一定的参考价值。

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);
    }

 

  

以上是关于使用vue-baidu-map开发地图找房的总结的主要内容,如果未能解决你的问题,请参考以下文章

回顾·HBase在贝壳找房的实践经验

都市白领租房APP定制解决了哪些找房的痛点

VUE+百度地图 vue-baidu-map

总结整理房产类---转自人人都是产品经理

微信小程序 地图组件中marker无法使用网络图片问题

vue 使用百度地图(vue-Baidu-Map)