百度地图在vue中使用的demo

1. 先去百度地图开放平台拿ak
2. 安装vue-baidu-map
3. 参考下面的例子的代码(该例子调成移动端浏览即可精确定位)

// main.js
import BaiduMap from 'vue-baidu-map'
Vue.use(BaiduMap, {
  /* Visit http://lbsyun.baidu.com/apiconsole/key for details about app key. */
  ak: 'O4Vh4wE3dqCWhut4ncQMYTZeINrXX2SB'
})

<!-- vue文件 -->
<template>
  <div class="hello">
    <baidu-map id="map" class="map"
    :center="center"
    :zoom="zoom"
    :MapType="'BMAP_NORMAL_MAP'"
    @ready="handler">
    </baidu-map>
    <div class="btn-group" style="display:none">
      <button class="btn" @click="zoomOut">+</button>
      <button class="btn" @click="zoomIn">-</button>
      <!-- <van-icon name="location" class="locate" @click="goToCurrentLocation"/> -->
      <!-- <button class="btn location-o" @click="goToCurrentLocation">定位到到当前位置</button> -->
      <!-- <button class="btn" @click="showRoute">显示路线</button> -->
    </div>
  </div>
</template>

<script>
export default {
  name: 'Map',
  data() {
    return {
      center: { lng: 0, lat: 0, },
      // zoom: 3,
      BMap: {},
      map: {},
      zoom: 12,
      point: {},
      BpPoint: {},
      marker: false,
    };
  },
  mounted() {
    // this.drawLine();
    // this.drawMap()
  },
  props: {
    routeLine: {
      type: Object,
      default: () => ({
        location: '',
        myLocal: '',
      }),
    },
  },
  methods: {
    handler({ BMap, map, }) {
      this.BMap = BMap;
      this.map = map;
      this.getCurrentLocation();
    },
    getCurrentLocation() { // 定位当前位置
      const geolocation = new this.BMap.Geolocation();
      geolocation.getCurrentPosition((res) => { // 获取当前经纬度
        if (res) {
          const { point, } = res;
          this.point = res.point;
          window.point = res.point;
          this.BpPoint = new this.BMap.Point(point.lng, point.lat);
          console.log('point', point);
          this.getLocationByPoint(res.point);
        }
      });
    },
    getLabel(res) {
      return new this.BMap.Label(res.address, { offset: new this.BMap.Size(20, -10), });
    },
    getLocationByPoint() { // 根据坐标绘制位置
      const geoc = new this.BMap.Geocoder();
      geoc.getLocation(this.BpPoint, (res) => {
        if (!this.marker) {
          this.marker = new this.BMap.Marker(this.BpPoint);
          this.map.addOverlay(this.marker); // 设置图标
          this.adjustMarker(this.getLabel(res));
        } else {
          this.adjustMarker(this.getLabel(res));
        }
      });
    },
    adjustMarker(label) { // 调整图标
      this.marker.setLabel(label); // 设置label
      this.marker.setAnimation(window.BMAP_ANIMATION_BOUNCE);// 图标动画
      this.map.centerAndZoom(this.BpPoint, this.zoom);
      this.showRoute();
      this.$emit('ready', this.point);
    },
    zoomIn() {
      this.map.zoomIn(); // 放大一级视图

      if (this.zoom < 19) {
        this.zoom++;
      } else {
        alert('地图级别在4-19之间');
      }
    },
    zoomOut() {
      this.map.zoomOut(); // 缩小一级视图

      if (this.zoom > 4) {
        this.zoom--;
      } else {
        alert('地图级别在4-19之间');
      }
    },
    goToCurrentLocation() {
      this.getLocationByPoint();
    },
    showRoute() {
      const driving = new this.BMap.DrivingRoute(this.map, {
        renderOptions: {
          map: this.map,
          autoViewport: true,
        },
        onSearchComplete(results) {
          console.log('results', results);
          if (driving.getStatus() == window.BMAP_STATUS_SUCCESS) {
            // 获取第一条方案
            const plan = results.getPlan(0);
            // 获取方案的驾车线路
            const route = plan.getRoute(0);
            // 获取每个关键步骤，并输出到页面
            // var s = [];
            for (let i = 0; i < route.getNumSteps(); i++) {
              const step = route.getStep(i);
              console.log(step);
            }
          }
        },
      });
      console.log(123);
      const localArr = this.routeLine.location.split(',');
      const myLocalArr = this.routeLine.myLocal.split(',');
      console.log(Number(localArr[0]), Number(localArr[1]));
      console.log(Number(myLocalArr[0]), Number(localArr[1]));
      console.log('localArr', localArr);
      console.log('myLocalArr', myLocalArr);
      const start = new this.BMap.Point(Number(localArr[1]), Number(localArr[0]));
      const end = new this.BMap.Point(Number(myLocalArr[1]), Number(myLocalArr[0]));
      driving.search(start, end);
    },
  },
};
</script>

<style lang="less" scoped>
  @import url("./main.less");
  .test {
    .calc-vw(222);
    height: 10rem;
    background-color: red;
  }
  .map {
    width: 100vw;
    .calc-vh(200);
  }
  .btn-group {
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    justify-content: center;
    .calc-vw(20);
    flex-wrap: wrap;
    .btn {
      display: block;
      margin-bottom: 20px;
    }
    .locate {
      .calc-font-size(25);
      color: red;
    }
  }
</style>

@sceenWidth:375;
.calc-vw(@width) {
  width: @width/@sceenWidth*100vw
}
.calc-vh(@width) {
  height: @width/@sceenWidth*100vw
}
.calc-font-size(@font-size) {
  font-size: @font-size/@sceenWidth*100vw
}
.calc-left(@left) {
  left: @left/@sceenWidth*100vw
}
.calc-margin-left(@margin-left) {
  margin-left: @margin-left/@sceenWidth*100vw
}
.calc-margin-right(@margin-right) {
  margin-right: @margin-right/@sceenWidth*100vw
}
.calc-margin-bottom(@margin-bottom) {
  margin-bottom: @margin-bottom/@sceenWidth*100vw
}
.calc-margin-top(@margin-top) {
  margin-top: @margin-top/@sceenWidth*100vw
}
.calc-padding-left(@padding-left) {
  padding-left: @padding-left/@sceenWidth*100vw
}
.calc-padding-right(@padding-right) {
  padding-right: @padding-right/@sceenWidth*100vw
}
.calc-padding-bottom(@padding-bottom) {
  padding-bottom: @padding-bottom/@sceenWidth*100vw
}
.calc-padding-top(@padding-top) {
  padding-top: @padding-top/@sceenWidth*100vw
}
.calc-top(@top) {
  top: -(@top/@sceenWidth*100vw)
}
img {
  max-width: 100%;
  height: auto!important;
}

@mainColor: #44D7B6;