Vue中使用百度地图Vue Baidu Map(vue-baidu-map)

最近负责的一个vue项目中需要调用百度地图api做标记打点的需求，记录一下：

vue-baidu-map 官方地址 

一.插件的安装

1.npm 安装

$ npm install vue-baidu-map --save

2.js 引入

index.html 中 

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

二.使用

1.全局注册(一次性引入百度地图组件的所有组件)

 

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

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

<template>
  <baidu-map class="bm-view">
  </baidu-map>
</template>

<style>
.bm-view {
  width: 100%;
  height: 300px;
}
</style>

2.局部注册(按需引入组件)

局部注册的 BaiduMap 组件必须声明 ak 属性。 所有的独立组件均存放在 vue-baidu-map/components 文件夹下，按需引用即可。 由于未编译的 ES 模块不能在大多数浏览器中直接运行，如果引入组件时发生运行时错误，请检查 webpack 的 loader 配置，确认 include 和 exclude 选项命中了组件库。

3.CND全局注册

<script>
Vue.use(VueBaiduMap.default, {
  ak: 'YOUR_APP_KEY'
})
</script>

 

我项目中所需功能比较简单，所以我选择了第二种方法局部引入了以下几种组件：

mport BaiduMap from 'vue-baidu-map/components/map/Map.vue';

import BmView from 'vue-baidu-map/components/map/MapView'; //地图视图

import BmLocalSearch from 'vue-baidu-map/components/search/LocalSearch'; //搜索

import BmMarker from 'vue-baidu-map/components/overlays/Marker'; //点标注

import BmInfoWindow from 'vue-baidu-map/components/overlays/InfoWindow'; //标注弹窗

 

实现的代码如下：

<template>
  <div>
    <div class="mb-10">
      <label>地区：<input v-model="location"/></label>

      <label> 关键词：<input v-model="keyword"/></label>

      <label> 经度：<input v-model="markerPo.lat"/></label>

      <label> 纬度：<input v-model="markerPo.lng"/></label>
    </div>

    <baidu-map
      ak="ocjtpCpd3HusX9VUmkfc49P9jxRV5Vch"
      :scroll-wheel-zoom="true"
      @rightclick="clickBmap"
    >
      <!--地图视图-->

      <bm-view class="map"></bm-view>

      <!--显示更多-->

      <div class="more_panel">
        <span :class="{ down: isShowPanel }" @click.stop="showPanel">
          <span>{{ isShowPanel ? "隐藏" : "显示" }}</span
          >搜索列表<i class="el-icon-d-arrow-right"></i>
        </span>
      </div>

      <!--搜索-->

      <bm-local-search
        :keyword="keyword"
        :panel="isShowPanel"
        :auto-viewport="true"
        :location="location"
        @searchcomplete="searchcomplete"
      ></bm-local-search>

      <!--点标注-->

      <bm-marker
        :position="markerPo"
        :dragging="true"
        :title="storeName"
        :zIndex="999999999"
        @click="infoWindowOpen"
        :icon="{ url: markerIcon, size: { width: 34, height: 34 } }"
        @dragend="dragend"
      >
        <bm-info-window
          :show="isShowInfo"
          @close="infoWindowClose"
          @open="infoWindowOpen"
          >{{ address }}</bm-info-window
        >
      </bm-marker>
    </baidu-map>
  </div>
</template>

<script>
import BaiduMap from "vue-baidu-map/components/map/Map.vue";

import BmView from "vue-baidu-map/components/map/MapView"; //地图视图

import BmLocalSearch from "vue-baidu-map/components/search/LocalSearch"; //搜索

import BmMarker from "vue-baidu-map/components/overlays/Marker"; //点标注

import BmInfoWindow from "vue-baidu-map/components/overlays/InfoWindow"; //标注弹窗

export default {
  components: {
    BaiduMap,

    BmView,

    BmLocalSearch,

    BmMarker,

    BmInfoWindow,
  },

  data() {
    return {
      storeName: "",

      center: {
        //经纬度

        lng: 39.9,
        lat: 116.3,
      },

      zoom: 3, //地图展示级别
      location: "北京",

      keyword: "北京",

      markerPo: {
        lng: 39.9,
        lat: 116.3,
      },

      isShowPanel: true,

      isShowInfo: false,

      markerIcon: "", //标注图片

      address: "",
    };
  },

  methods: {
    clickBmap(val) {
      //右击鼠标放标注

      this.markerPo = val.point;
    },

    showPanel() {
      //点击标注出现弹框

      this.isShowPanel = !this.isShowPanel;
    },

    infoWindowClose() {
      //弹框关闭

      this.isShowInfo = false;
    },

    infoWindowOpen() {
      //弹框打开

      this.isShowInfo = true;
    },

    dragend(val) {
      //标注拖拽完成获取坐标信息

      this.markerPo = val.point;

      let geocoder = new BMap.Geocoder(); //创建地址解析器的实例

      geocoder.getLocation(val.point, (rs) => {
        this.address = rs.address;
      });
    },

    searchcomplete(arr) {
      this.isShowPanel = true;
    },
  },
};
</script>

<style lang="scss" scoped>
.map {
  width: 100%;

  height: 500px;
}

.more_panel {
  text-align: center;

  font-size: 12px;

  color: #2878ff;

  padding-top: 10px;

  span {
    cursor: pointer;

    i {
      transform: rotate(90deg);
    }
  }

  span.down {
    i {
      transform: rotate(-90deg);
    }
  }
}
</style>

其中获取点坐标的信息是废了一点时间，因为只拿到经纬度，想要获取具体街道信息就需要使用

let geocoder= new BMap.Geocoder(); //创建地址解析器的实例

  geocoder.getLocation(val.point,rs=>{

  console.log(val.address)

})