vue2项目封装百度地图3.0拾取坐标控件

百度地图拾取坐标系统，简单的说，就把这玩意封装成控件。

在 Vue2项目中对百度地图的封装使用 这个的基础上实现的，配合 element-UI 实现。

效果图

使用

<point-select-dialog ref="pointSelectDialog" @confirmCllick="bMapPointSelect" />

export default {
  name: 'Home',
  components: {
    PointSelectDialog: () => import ('@/components/bmap/pointSelect.vue')
  },
  methods: {
    bMapPointSelect(res) {
      console.log(res)
    }
  }
}

代码总览

涉及的文件如下（具体参考代码）：

|-- public
	|-- images  // 注意，地图需要到的图片放这里
|-- src
    |-- components
        |-- bmap
        	|-- bmap-jsapi-loader
        		|-- index.js
            |-- pointSelect.vue    // 百度地图拾取坐标控件
            |-- index.vue    // 地图单文件组件，供界面调用
            |-- index.js    // 地图初始化、配置相关
    |-- views
        |-- Home.vue    // 演示实例所在

代码

按代码总览的目录去代码里找着看就行了。

总结

用百度地图3.0 Api封装了一个拾取坐标控件，方便搜索选坐标、地图上拾取坐标。