[JavaScript知识库]vue-baidu-map

先安装 npm install vue-bai-map --save
全局引用，找到main.js

import BaiduMap from 'vue-baidu-map'

Vue.use(BaiduMap, {
  // ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */
  ak: '密钥'
})

最后就直接使用就好，例子如下：
后面样式是去掉了百度的logo以及标题

<template>
  <div class="app-container">
    <el-autocomplete
      v-model.trim="address"
      :fetch-suggestions="querySearch"
      placeholder="请输入详细地址"
      style="width: 40%"
      :trigger-on-focus="false"
      @select="handleSelect"
    />
    <div style="margin: 5px">
      <baidu-map
        class="map"
        ref="map"
        :center="mapCenter"
        :zoom="mapZoom"
        @click="paintPolyline"
        @ready="map_handler"
        @mousemove="mousemovePolyline"
        @rightclick="rightPolyline">
        <!--定位-->
        <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true"></bm-geolocation>
        <!--比例尺-->
        <bm-scale  anchor="BMAP_ANCHOR_BOTTOM_RIGHT"></bm-scale>
        <!--缩放-->
        <bm-navigation anchor="BMAP_ANCHOR_TOP_left"></bm-navigation>
        <!--地图右下角加入定位控件-->
        <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true"></bm-geolocation>
        <!--地图类型-->
        <bm-map-type :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']" anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-map-type>
        <bm-control style="padding-left: 50px">
          <button @click="toggle('polyline')">{{ polyline.editing ? '停止绘制' : '开始绘制' }}</button>
        </bm-control>
        <bm-polyline :path="path" v-for="path of polyline.paths" :key="path"></bm-polyline>
        <bm-polygon :path="polygonPath" stroke-color="blue" :stroke-opacity="0.5" :stroke-weight="2" :editing="true" @lineupdate="updatePolygonPath"/>
        <!--        <bm-marker :position="mapCenter" :dragging="true" animation="BMAP_ANIMATION_BOUNCE">-->
        <!--          <bm-label content="我爱北京天安门" :labelStyle="{color: 'red', fontSize : '24px'}" :offset="{width: -35, height: 30}"/>-->
        <!--        </bm-marker>-->
        <bm-local-search :keyword="address" :auto-viewport="true" style="display: none"></bm-local-search>
        <bml-drawing-manager :isOpen="true" :enableDrawingTool="enableDrawingTool">

        </bml-drawing-manager>
      </baidu-map>
    </div>
  </div>
</template>
<script>
  // 引入异步引入地图的方法
  //import { loadBaiDuDrawMap } from "@/util/bmpgl_lib.js";
  export default {
    name: "Map",
    data() {
      return {
        location: "湘潭市九华经开区", //百度地图默认优先检索地区
        keyword:  "", //百度地图搜索值
        coordinate: '', //
        polygonPath: [], // 多边形集合
        address: "", // 百度地图搜索框值
        mapZoom: 17, //百度地图展示层级
        mapCenter: { lng: 112.951737, lat: 27.929792 }, //lng: 百度地图经度  lat: 百度地图纬度
        selectFirstResult:true,//百度地图是否选择第一个检索结果
        pageCapacity:1,//百度地图设置每页容量，取值范围：1 - 100，对于多关键字检索，每页容量表示每个关键字返回结果的数量（例如当用2个关键字检索时，实际结果数量范围为：2 - 200）。此值只对下一次检索有效
        polyline: { // 折线的对象
          editing: false,
          paths: []
        },
        enableDrawingTool: '',
        drawingManager: '',
      };
    },
    methods:{
      map_handler({ BMap, map }) {
        this.BMap = BMap;
        this.map = map;
        if (this.coordinate && this.coordinate.lng) {
          this.mapCenter.lng = this.coordinate.lng
          this.mapCenter.lat = this.coordinate.lat
          this.mapZoom = 17
          var marker = new BMap.Marker(new BMap.Point(this.map.point.lng, this.map.point.lat));
          map.addOverlay(marker);
          //跳动的动画
          marker.setAnimation(BMAP_ANIMATION_BOUNCE);

        } else {
          this.mapCenter.lng = 112.951737
          this.mapCenter.lat = 27.929792
          this.mapZoom = 17
        }
      },

      // 搜索远程调用
      querySearch(queryString, cb) {
        var that = this;
        var myGeo = new this.BMap.Geocoder();
        myGeo.getPoint(
          queryString,
          function(point) {
            if (point) {
              that.coordinate = point;
              that.makerCenter(point);
            } else {
              that.coordinate = null;
            }
          },
          this.locationCity
        );
        var options = {
          onSearchComplete: function(results) {
            if (local.getStatus() === 0) {
              // 判断状态是否正确
              var s = [];
              for (var i = 0; i < results.getCurrentNumPois(); i++) {
                var x = results.getPoi(i);
                var item = { value: x.address + x.title, point: x.point };
                s.push(item);
                cb(s);
              }
            } else {
              cb();
            }
          },
        };
        var local = new this.BMap.LocalSearch(this.map, options);
        local.search(queryString);
      },
      // 点击 点击标注图标后会触发此事件
      paintPolyline(item) {
        var { point } = item;
        this.flag = true;
        this.makerCenter(point);
        if (!this.polyline.editing) {
          return
        }
        const {paths} = this.polyline
        !paths.length && paths.push([])
        paths[paths.length - 1].push(item.point)
      },
      // 搜索
      handleSelect(item) {
        var { point } = item;
        this.coordinate = point;
        this.makerCenter(point);
      },
      // 坐标添加
      makerCenter(point) {
        if (this.map) {
          this.map.clearOverlays();
          //var marker = new this.BMap.Marker(point);
          this.map.addOverlay(new this.BMap.Marker(point));
          //跳动的动画
          // eslint-disable-next-line no-undef
          //marker.setAnimation(BMAP_ANIMATION_BOUNCE);
          this.mapCenter.lng = point.lng;
          this.mapCenter.lat = point.lat;
          this.mapZoom = 17;
          this.mapCenter= { lng: point.lng, lat: point.lat }
        }
      },
      // 按钮控制 是否启用线编辑
      toggle (name) {
        this[name].editing = !this[name].editing
      },
      // 鼠标移除的时候   当鼠标进入折线区域时会触发此事件
      mousemovePolyline (e) {
        if (!this.polyline.editing) {
          return
        }
        const {paths} = this.polyline
        if (!paths.length) {
          return
        }
        const path = paths[paths.length - 1]
        if (!path.length) {
          return
        }
        if (path.length === 1) {
          path.push(e.point)
        }
        this.$set(path, path.length - 1, e.point)
        //console.log(12,e.point)
      },
      // 鼠标右击结束划区域 右键单击地图时触发此事件
      rightPolyline () {
        if (!this.polyline.editing) {
          return
        }
        const {paths} = this.polyline
        if(!paths.length) {
          paths.push([])
        }
        const path = paths[paths.length - 1]

        path.pop()
        if (path.length) {
          paths.push([])
          this.map.clearOverlays(); // 去除覆盖物
          this.polygonPath = path
        }
      },
      // 多边形的更新  覆盖物的属性发生变化时触发
      updatePolygonPath(e) {
        this.polygonPath = e.target.getPath()
      },
    }
  };
</script>
<style scoped>
  .rowMap {
    margin-bottom: 15px;
  }
  .map{
    height: 500px;
  }
  >>>.anchorBL,

    /*>>>.anchorTR,去除二维或三维的*/

  >>>.BMap_zlHolder{

    display:none;

    visibility:hidden;

  }
</style>