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封装了一个拾取坐标控件，方便搜索选坐标、地图上拾取坐标。

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

vue2项目使用百度地图
效果图: 1.下载插件 vue-bmap-gl 2.在main.js中引入 //地图 import VueBMap from "vue-bmap-gl"; import &qu ...
Vue项目引用百度地图并实现搜索定位等功能
Tip:本篇文章为案例分析,技术点较多,所以篇幅较长,认真阅览的你一定会学到很多知识. 前言:百度地图开放平台给开发者们提供了丰富的地图功能与服务,使我们的项目中可以轻松地实现地图定位.地址搜索.路 ...
Vue项目使用百度地图——经纬度地图组件的封装及使用
1 前言要在vue项目使用百度地图api,首先应做以下配置 (1)index.html index.html添加script <script src="http://api.map. ...
vue项目引入百度地图BMapGL鼠标绘制和BMap辅助工具
目录引言 1.引用百度地图 2.在项目中使用百度地图 2-1.页面结构部分 2-2.js逻辑部分 3-1.页面结构部分 Vue.js 是一个用于构建用户界面的渐进式 JavaScript 框架.它旨 ...
react项目使用百度地图API
文章目录前言一.接入API 1.登录百度地图 2.创建应用,获取密钥 3.引入API 4.当作模块导入BMap 二.使用 1.引入 2.展示地图三.效果展示总结前言最近在开发一款react ...
vue 项目中百度地图 API 使用流程
文章目录一.在百度地图开放平台注册账号并登录.认证二.创建 ak 三.项目使用四.丰富的功能一.在百度地图开放平台注册账号并登录.认证 1.网址:http://lbsyun.baidu.com ...
百度地图android室内定位,百度地图4.0正式发布，主打免费语音导航、室内定位、实时公交和生活搜索 (视频)...
自2010年10月百度地图在塞班平台上线了第一个版本以后,陆续登陆了Android和iPhone平台,据百度地图团队介绍,其最新的用户数已达7000万.今天,百度地图4.0 正式发布(iPhone版 ...
百度地图android版 v4.0,百度地图4.0正式发布支持iOS与Android
百度地图今日正式推4.0版本,面向iOS及Android平台,新版的主要特色包括免费语音导航.室内定位.实时公交.生活搜索等.百度相关负责人表示,新版实现了一键导航功能,通过不同色彩标注实时路况,可帮 ...
android 百度地图室内定位,百度地图4.0正式发布：室内定位功能亮相
图为王府井百货4层室内图新浪科技讯 9月21日下午消息,百度地图今日正式推4.0版本,在iOS及Android平台上线,拥有免费语音导航.室内定位.实时公交.生活搜索等功能,百度地图将由出行助手向生 ...
百度地图3.0离线地图教程和echarts的结合使用
百度地图版本2.0和3.0区别对比 http://lbsyun.baidu.com/index.php?title=jspopular3.0/guide/usage 1.找到百度地图的主文件 1.1 ...

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

效果图

使用

代码总览

代码

总结

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

最新文章

热门文章