【vue-baidu-map】引用+各种功能的实现

目录

引用

使用 

1、Vue Baidu Map关闭左下角的百度logo

2、Vue Baidu Map关闭底图点击功能

3、Vue Baidu Map鼠标滚动控制缩放

4、注意：不要试图在 vue 自身的生命周期中调用 BMap 类，更不要在这些时机修改 model 层

5、带箭头的折线组件

6、固定显示 - 框中内容

7.offset使用

---

引用

NPM

$ npm install vue-baidu-map --save

CDN

<script src="https://unpkg.com/vue-baidu-map"></script>

 main.js添加

Vue.use(VueBaiduMap.default, {
  ak: 'sWu18oy4dIMWHLHoSMHsUvI58zrjWU89'
})

使用 

1、Vue Baidu Map关闭左下角的百度logo

公共文件加入

.BMap_cpyCtrl {

    display: none!important;

}

.anchorBL {

    display: none!important;

}

2、Vue Baidu Map关闭底图点击功能

加入:mapClick="false"

 <baidu-map style="position:absolute;width: 100%;height: 100%;z-index:0;"
        :center="center" :zoom="zoom" @ready="handler" :scroll-wheel-zoom="true" :mapClick="false">
</baidu-map>

3、Vue Baidu Map鼠标滚动控制缩放

加入:scroll-wheel-zoom="true"

4、注意：不要试图在 vue 自身的生命周期中调用 BMap 类，更不要在这些时机修改 model 层

正确例子

<template>
  <baidu-map :center="center" :zoom="zoom" @ready="handler"></baidu-map>
</template>
<script>
export default {
  data () {
    return {
      center: {lng: 0, lat: 0},
      zoom: 3
    }
  },
  methods: {
    handler ({BMap, map}) {
      console.log(BMap, map)
      this.center.lng = 116.404
      this.center.lat = 39.915
      this.zoom = 15
    }
  }
}
</script>

5、带箭头的折线组件

 使用：（具体使用详见下一篇）

<new-polyline  v-for="(item,index) in linePoints" :key="index" :path="item.point" :icons="item.icon" stroke-color="#0F70F6" :stroke-opacity="0.8"
          :stroke-weight="10"></new-polyline>

import newPolyline from "./children/new_polyline"

  export default {
    components: {
      newPolyline
    },
  }

引用  new_polyline.vue

<script>
/**
 * 注意此处三个引入路径
 * 在源文件中使用的是相对路径
 * 但是因为现在是自定义组件,所以要重新调整路径
 */
import commonMixin from "vue-baidu-map/components/base/mixins/common.js";
import bindEvents from "vue-baidu-map/components/base/bindEvent.js";
import { createPoint } from "vue-baidu-map/components/base/factory.js";

export default {
 // 起一个新名字
 name: "new-polyline",
 render() {},
 mixins: [commonMixin("overlay")],
 props: {
  path: {
   type: Array
  },
  icons: {
   type: Array
  },
  strokeColor: {
   type: String
  },
  strokeWeight: {
   type: Number
  },
  strokeOpacity: {
   type: Number
  },
  strokeStyle: {
   type: String
  },
  massClear: {
   type: Boolean,
   default: true
  },
  clicking: {
   type: Boolean,
   default: true
  },
  editing: {
   type: Boolean,
   default: false
  }
 },
 watch: {
  path: {
   handler(val, oldVal) {
    this.reload();
   },
   deep: true
  },
  strokeColor(val) {
   this.originInstance.setStrokeColor(val);
  },
  strokeOpacity(val) {
   this.originInstance.setStrokeOpacity(val);
  },
  strokeWeight(val) {
   this.originInstance.setStrokeWeight(val);
  },
  strokeStyle(val) {
   this.originInstance.setStrokeStyle(val);
  },
  editing(val) {
   val
    ? this.originInstance.enableEditing()
    : this.originInstance.disableEditing();
  },
  massClear(val) {
   val
    ? this.originInstance.enableMassClear()
    : this.originInstance.disableMassClear();
  },
  clicking(val) {
   this.reload();
  },
 },
 methods: {
  load() {
   const {
    BMap,
    map,
    path,
    icons,
    strokeColor,
    strokeWeight,
    strokeOpacity,
    strokeStyle,
    editing,
    massClear,
    clicking
   } = this;
   const overlay = new BMap.Polyline(
    path.map(item =>
     createPoint(BMap, {
      lng: parseFloat(item.lng),
      lat: parseFloat(item.lat)
     })
    ),
    {
     strokeColor,
     strokeWeight,
     strokeOpacity,
     strokeStyle,
     icons,
     enableEditing: editing,
     enableMassClear: massClear,
     enableClicking: clicking
    }
   );
   this.originInstance = overlay;
   map.addOverlay(overlay);
   bindEvents.call(this, overlay);
  }
 }
};
</script>

6、固定显示 - 框中内容

使用：（具体使用详见下一篇）

<MyOverlay v-for="item in maps" :key="item.id"
          :position="{lng: item.longitude, lat: item.latitude}" :text="item.name"
          :img1="item.deviceWarn?'static/img/alarm2.png':''" :img2="item.qualityWarn?'static/img/alarm1.png':''">
</MyOverlay>


  import MyOverlay from '@/components/common/MyOverlay.vue'

  components: {
      MyOverlay,
    },

引用   MyOverlay.vue

<template>
  <bm-overlay
    ref="customOverlay"
    :class="{sample: true, active}"
    pane="labelPane"
    @draw="draw">
    <div><div class="text">{{text}}</div><img v-if="img1!=''" :src="img1" height="13vh" width="13vh" alt="图像" />
    <img v-if="img2!=''" :src="img2" height="13vh" width="13vh" alt="图像" /></div> 
  </bm-overlay>
</template>

<script>
export default { 
  props: ['text','img1','img2', 'position', 'active'],
  watch: {
    position: { 
      handler () { 
        this.$refs.customOverlay.reload() 
      },
      deep: true 
    }
  },
  methods: {
    draw ({el, BMap, map}) {
      const {lng, lat} = this.position
      const pixel = map.pointToOverlayPixel(new BMap.Point(lng, lat))
      el.style.left = pixel.x +20 + 'px'
      el.style.top = pixel.y - 30 + 'px'
    }
  }
}
</script>

<style>
.text{
  padding: 2px;
  /* text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical; */
}
.sample {
  width: 80px;
  /* height: 30px; */
  background: rgba(255,255,255,0.5);
  overflow: hidden;
  box-shadow: 0 0 5px #fff;
  color: #323232;
  padding: 5px;
  position: absolute;
  font-size: 10px;
  
}
</style>

7.offset使用

为何使用？

弹框发生了偏移

加入 :offset="{width:-10,height:-35}"后：

 举个例子：

<bm-info-window :position="{lng: infoWindowContent.siteLng, lat: infoWindowContent.siteLat}" :width="300"
        :height="0" :show="infoWindowShow" :offset="{width:-10,height:-35}">