博客

1、安装百度地图插件

npm install vue-baidu-map

2、引入

import Vue from 'vue'
import BaiduMap from 'vue-baidu-map'

Vue.use(BaiduMap, {
  ak: 'MGN1E7IAI7hIiIDNoTvctiCUDANfFXBp'
})

3、使用

<template>
  <div>
    <baidu-map
      class="bm-view"
      :center="center"
      :zoom="zoom"
      @ready="handler"
      style="height: 500px"
      @click="getPoint"
      :scroll-wheel-zoom="true"
    >
      <bm-view style="width: 100%; height: 500px; flex: 1"></bm-view>
      <!-- 搜索控件 -->
      <bm-local-search
        :keyword="keyword"
        :auto-viewport="true"
        style="display: none"
      ></bm-local-search>
      <!-- marker坐标点 -->
       <bm-marker
            :position="center"
            :dragging="true"
            animation="BMAP_ANIMATION_BOUNCE"
          ></bm-marker>
      <bm-geolocation
        anchor="BMAP_ANCHOR_BOTTOM_RIGHT"
        :showAddressBar="true"
        :autoLocation="true"
      ></bm-geolocation>
    </baidu-map>
  </div>
</template>

<script>
export default {
  name: "index",
  data() {
    return {
      // 地图相关
      keyword: "",
      center: { lng: 120.9909, lat: 31.398754 },
      zoom: 10, // 地图缩放
      show: true, //显示标签
      scroll: true, //地图缩放
      dragging: true, //地图拖拽
    };
  },
  created() {},
  methods: {
    // 地图初始化
    handler({ BMap, map }) {
      let that = this; // 设置一个临时变量指向vue实例，在百度地图回调里使用this，指向的不是vue实例
      // 获取自动定位方法
      var geolocation = new BMap.Geolocation();
      // 获取自动定位获取的坐标信息
      geolocation.getCurrentPosition(
        function (r) {
          that.center = {
            lng: r.point.lng,
            lat: r.point.lat,
          };
        },
        { enableHighAccuracy: true }
      );
    },
    // 点击获取当前经纬度
    getPoint(e) {
      this.zoom = e.target.getZoom();
      /* 全局 BMap */
      let geocoder = new BMap.Geocoder(); // 创建地址解析器的实例
      geocoder.getLocation(e.point, (rs) => {
        // this.form.longitude = e.point.lng;
        // this.form.latitude = e.point.lat;
      });
    },
  },
};
</script>

<style scoped lang="scss">
</style>