使用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產品要求地圖向上移時，篩選標籤隱藏，向下移時篩選標籤顯示。實現此功能須要監聽center的lat。

　　我開始的錯誤作法，在moveEnd的方法裏使用

　　this.center=this.map.getCenter()

　　而後使用watch深度監聽center。這個需求卻是知足了，可是引出了大bug。每次地圖移動都會請求數據生成覆蓋物，這樣會致使覆蓋物的定位錯亂。

　　正確作法，在moveEnd的方法裏使用

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

　　監聽center1就不會產生覆蓋物定位錯亂的不過

二、使用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);
    }