莫方教程网

今天给小伙伴们推荐一款超高标准的 Vue2.x 地图选择器组件VueBaiduMap。

vue-baidu-map 一个基于Vue.js封装的高水平百度地图组件。全中英文文档，丰富的API示例，支持引入百度地图扩展包。

安装

$ npm i vue-baidu-map -S

引入

# 全局引入：在main.js中注册组件
import Vue from 'vue'
import VueBaiduMap from 'vue-baidu-map'

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

# 按需引入：局部注册的 BaiduMap 组件必须声明 ak 属性
<template>
  <vue-baidu-map class="bm-view" ak="MAP_APP_KEY"></vue-baidu-map>
</template>
<script>
# 所有独立组件均存放在 vue-baidu-map/components 文件夹下，按需引用即可
import VueBaiduMap from 'vue-baidu-map/components/map/Map.vue'
export default {
  components: {
    VueBaiduMap
  }
}
</script>

使用插件

<template>
  <vue-baidu-map
    class="map-view"
    :scroll-wheel-zoom="true"
    :center="location"
    :zoom="zoom"
    @click="getLocationPoint"
    @zoomend="getCenterAndZoom"
  >
  </vue-baidu-map>
</template>

<script>
export default {
  data() {
    return {
      location: {
        lng: 116.318,
        lat: 39.996,
      },
      zoom: 15,
    }
  },
  methods: {
    getLocationPoint(e) {
      console.log(e.point);
    },
    getCenterAndZoom(e) {
      const {lng, lat} = e.target.getCenter()
      this.location.lng = lng
      this.location.lat = lat
      this.zoom = e.target.getZoom()
    }
  }
}
</script>

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

提供各种丰富的示例及API调用

最后附上文档及仓库地址

# 文档/示例地址
https://dafrok.github.io/vue-baidu-map/

# github地址
https://github.com/Dafrok/vue-baidu-map

ok，就介绍到这里。大家如果有其他Vue地图组件，欢迎一起交流讨论。若是对你的学习有帮助，记得留个印记哈！