百度地图拾取坐标系统,简单的说,就把这玩意封装成控件。
在 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封装了一个拾取坐标控件,方便搜索选坐标、地图上拾取坐标。