vue中调用百度地图获取经纬度的实现
项目中,需要实现获取当前位置的经纬度,或者搜索某个位置并获取经纬度信息,我使用的的是vue,地图使用的是百度地图。
默认自动获取当前位置经纬度
拖动小红标 获取经纬度
关键词 查询获取经纬度
前期准备
首先,我们需要取百度官方申请一个地图api秘钥,https://lbsyun.baidu.com/apiconsole/key 进入后在应用管理,我的应用去申请即可。
申请好以后,我们打开vue项目中public文件下的index.html文件,拼接百度AK值并引入
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=WFKACU6v7aiUdnkgtMCqdWBZC68KpUXv"></script>
如上所示,红色区域为AK值,自行拼接自己的,可以设置权限为公开或者针对网址白名单。
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=WFKACU6v7aiUdnkgtMCqdWBZC68KpUXv"></script>
我使用了elementui的弹窗,输入框,提示,如果你没使用elementui,记得更换哦!
HTML代码
<template> <div> <el-dialog @close="clearDialog" :close-on-click-modal="false" :title="text" style="text-align: left" :visible.sync="popup" width="30%" > <div class="form-layer"> <el-form label-width="100px" size="mini"> <el-form-item label="获取定位"> <el-button type="primary" @click="fixedPos">重新定位</el-button> </el-form-item> <el-form-item label="当前纬度"> <p>{{latitude}}</p> </el-form-item> <el-form-item label="当前经度"> <p>{{longitude}}</p> </el-form-item> <el-form-item> <div class="f-a-c"> <el-input v-model="keyWords" placeholder="请输入地区" style="width: 230px;margin-right: 6px;"></el-input> <el-button type="primary" @click="setPlace" :disabled="!keyWords">查询</el-button> </div> </el-form-item> </el-form> <div id="map"></div> </div> <div slot="footer" class="dialog-footer"> <el-button size="small" type="primary" v-if="type != '2'" @click="btnSubmit()" >确 认</el-button > <el-button size="small" @click="popup = false">取 消</el-button> </div> </el-dialog> </div> </template>
JS代码
<script> export default { name: "mapView", data() { return { map: null, local: null, mk: null, latitude: '', longitude: '', keyWords: '' }; }, methods: { // 打开弹窗,name为弹窗名称 async openDialog(name) { this.text = name; this.popup = true; this.initMap(); }, // 确认 btnSubmit() { let key = { latitude: this.latitude, longitude: this.longitude } // 打印经纬度 console.log(key); this.popup = false; }, initMap() { this.$nextTick(() => { this.map = new BMap.Map("map"); let point = new BMap.Point(116.404, 39.915); this.map.centerAndZoom(point, 12); this.map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放 this.map.addControl(new BMap.NavigationControl()); this.fixedPos(); }); }, // 点击定位-定位到当前位置 fixedPos() { const _this = this; const geolocation = new BMap.Geolocation(); this.confirmLoading = true; geolocation.getCurrentPosition(function (r) { if (this.getStatus() == BMAP_STATUS_SUCCESS) { _this.handleMarker(_this, r.point); let myGeo = new BMap.Geocoder(); myGeo.getLocation( new BMap.Point(r.point.lng, r.point.lat), function (result) { _this.confirmLoading = false; if (result) { _this.latitude = result.point.lat; _this.longitude = result.point.lng; } } ); } else { _this.$message.error("failed" + this.getStatus()); } }); }, // 搜索地址 setPlace() { this.local = new BMap.LocalSearch(this.map, { onSearchComplete: this.searchPlace, }); this.local.search(this.keyWords); }, searchPlace() { if (this.local.getResults() != undefined) { this.map.clearOverlays(); //清除地图上所有覆盖物 if (this.local.getResults().getPoi(0)) { let point = this.local.getResults().getPoi(0).point; //获取第一个智能搜索的结果 this.map.centerAndZoom(point, 18); this.handleMarker(this, point); console.log("经度:" + point.lng + "--" + "纬度" + point.lat); this.latitude = point.lat; this.longitude = point.lng; } else { this.$message.error("未匹配到地点!"); } } else { this.$message.error("未找到搜索结果!"); } }, // 设置标注 handleMarker(obj, point) { let that = this; obj.mk = new BMap.Marker(point); obj.map.addOverlay(obj.mk); obj.mk.enableDragging(); // 可拖拽 obj.mk.addEventListener("dragend", function (e) { // 监听标注的拖拽,获取拖拽后的经纬度 that.latitude = e.point.lat; that.longitude = e.point.lng; }); obj.map.panTo(point); }, } }; </script>
CSS代码
<style scoped> .form-layer { width: 100%; } #map { margin-top: 30px; width: 100%; height: 300px; border: 1px solid gray; box-sizing: border-box; overflow: hidden; } /deep/ .el-dialog { min-width: 550px; } /deep/ .el-dialog__body { padding: 10px; } </style>
完整代码
<template> <div> <el-dialog @close="clearDialog" :close-on-click-modal="false" :title="text" style="text-align: left" :visible.sync="popup" width="30%" > <div class="form-layer"> <el-form label-width="100px" size="mini"> <el-form-item label="获取定位"> <el-button type="primary" @click="fixedPos">重新定位</el-button> </el-form-item> <el-form-item label="当前纬度"> <p>{{latitude}}</p> </el-form-item> <el-form-item label="当前经度"> <p>{{longitude}}</p> </el-form-item> <el-form-item> <div class="f-a-c"> <el-input v-model="keyWords" placeholder="请输入地区" style="width: 230px;margin-right: 6px;"></el-input> <el-button type="primary" @click="setPlace" :disabled="!keyWords">查询</el-button> </div> </el-form-item> </el-form> <div id="map"></div> </div> <div slot="footer" class="dialog-footer"> <el-button size="small" type="primary" v-if="type != '2'" @click="btnSubmit()" >确 认</el-button > <el-button size="small" @click="popup = false">取 消</el-button> </div> </el-dialog> </div> </template> <script> export default { name: "mapView", data() { return { map: null, local: null, mk: null, latitude: '', longitude: '', keyWords: '' }; }, methods: { // 打开弹窗,name为弹窗名称 async openDialog(name) { this.text = name; this.popup = true; this.initMap(); }, // 确认 btnSubmit() { let key = { latitude: this.latitude, longitude: this.longitude } // 打印经纬度 console.log(key); this.popup = false; }, initMap() { this.$nextTick(() => { this.map = new BMap.Map("map"); let point = new BMap.Point(116.404, 39.915); this.map.centerAndZoom(point, 12); this.map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放 this.map.addControl(new BMap.NavigationControl()); this.fixedPos(); }); }, // 点击定位-定位到当前位置 fixedPos() { const _this = this; const geolocation = new BMap.Geolocation(); this.confirmLoading = true; geolocation.getCurrentPosition(function (r) { if (this.getStatus() == BMAP_STATUS_SUCCESS) { _this.handleMarker(_this, r.point); let myGeo = new BMap.Geocoder(); myGeo.getLocation( new BMap.Point(r.point.lng, r.point.lat), function (result) { _this.confirmLoading = false; if (result) { _this.latitude = result.point.lat; _this.longitude = result.point.lng; } } ); } else { _this.$message.error("failed" + this.getStatus()); } }); }, // 搜索地址 setPlace() { this.local = new BMap.LocalSearch(this.map, { onSearchComplete: this.searchPlace, }); this.local.search(this.keyWords); }, searchPlace() { if (this.local.getResults() != undefined) { this.map.clearOverlays(); //清除地图上所有覆盖物 if (this.local.getResults().getPoi(0)) { let point = this.local.getResults().getPoi(0).point; //获取第一个智能搜索的结果 this.map.centerAndZoom(point, 18); this.handleMarker(this, point); console.log("经度:" + point.lng + "--" + "纬度" + point.lat); this.latitude = point.lat; this.longitude = point.lng; } else { this.$message.error("未匹配到地点!"); } } else { this.$message.error("未找到搜索结果!"); } }, // 设置标注 handleMarker(obj, point) { let that = this; obj.mk = new BMap.Marker(point); obj.map.addOverlay(obj.mk); obj.mk.enableDragging(); // 可拖拽 obj.mk.addEventListener("dragend", function (e) { // 监听标注的拖拽,获取拖拽后的经纬度 that.latitude = e.point.lat; that.longitude = e.point.lng; }); obj.map.panTo(point); }, } }; </script> <style scoped> .form-layer { width: 100%; } #map { margin-top: 30px; width: 100%; height: 300px; border: 1px solid gray; box-sizing: border-box; overflow: hidden; } /deep/ .el-dialog { min-width: 550px; } /deep/ .el-dialog__body { padding: 10px; } </style>
到此这篇关于vue中调用百度地图获取经纬度的实现的文章就介绍到这了,更多相关vue调用百度地图获取经纬度内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞!
相关文章
- 这篇文章主要介绍了vue中activated的用法,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下...2021-01-03
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
这篇文章主要介绍了基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-02-23Antd-vue Table组件添加Click事件,实现点击某行数据教程
这篇文章主要介绍了Antd-vue Table组件添加Click事件,实现点击某行数据教程,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-17- 这篇文章主要介绍了vue 实现动态路由的方法,文中示例代码非常详细,帮助大家更好的理解和学习,感兴趣的朋友可以了解下...2020-07-06
- 这篇文章主要介绍了Vue组件跨层级获取组件操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-28
- 这篇文章主要介绍了Vue基于localStorage存储信息代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-11-16
- 这篇文章主要介绍了vue 监听 Treeselect 选择项的改变操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
这篇文章主要介绍了antdesign-vue结合sortablejs实现两个table相互拖拽排序功能,本文通过实例图文相结合给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-01-09- 这篇文章主要介绍了vue 获取到数据但却渲染不到页面上的解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-11-19
vuejs element table 表格添加行,修改,单独删除行,批量删除行操作
这篇文章主要介绍了vuejs element table 表格添加行,修改,单独删除行,批量删除行操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-18- 最常见的多环境配置,就是开发环境配置,和生产环境配置,本文主要介绍了vue项目多环境配置的实现,感兴趣的可以了解一下...2021-07-20
vue项目页面嵌入代码块vue-prism-editor的实现
这篇文章主要介绍了vue项目页面嵌入代码块vue-prism-editor的实现,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-10-30- 这篇文章主要介绍了Vue 3.0 中 jsx 语法使用,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下...2020-11-13
解决vue的router组件component在import时不能使用变量问题
这篇文章主要介绍了解决vue的router组件component在import时不能使用变量问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-27- 采用CSS覆盖的方法就可以了,但是官方是不允许这么做的...2013-10-13
- 这篇文章主要介绍了vue treeselect获取当前选中项的label实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01
vue Treeselect下拉树只能选择第N级元素实现代码
这篇文章主要介绍了vue Treeselect下拉树只能选择第N级元素实现代码,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01- 这篇文章主要给大家介绍了关于Vue中slot-scope的深入理解,这个教程非常适合初学者,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-17
- 这篇文章主要为大家详细介绍了vue实现同时设置多个倒计时,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-05-20
Ant design vue table 单击行选中 勾选checkbox教程
这篇文章主要介绍了Ant design vue table 单击行选中 勾选checkbox教程,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-10-25