vue项目使用百度地图API获取经纬度上送后端获取位置
2020-02-03 02:35
2011 查看
一、首先在百度api注册获得ak密钥
二、进行引入
第一种方式:
直接在vue中index.html中用script标签引入。
//你的ak密钥需要替换真实的你的ak码 <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的ak密钥"></script>
第二种方式:
新建js文件,我命名为loadResources,里面创建script
// 这段代码写在js文件里 export function loadBMap(funcName) { var script = document.createElement("script"); script.src = "http://api.map.baidu.com/api?v=2.0&ak=你的ak密钥&callback=" + funcName; document.body.appendChild(script); }
三、运用到具体文件中
第二种方式需要在你用到的地方进行引入文件
//根据你文件的真实路径引入 import {loadBMap} from '../loadResources'
created() { window.initBaiduMapScript = () =>{ console.log(BMap); this.getlocation(); } loadBMap('initBaiduMapScript'); },
methods:{ getlocation(){ const that = this; this.$nextTick(function(){ try{ const geolocation =new BMap.Geolocation(); geolocation.getCurrentPosition(function(r){ console.log(r,"aaaa"); if(this.getStatus() == BMAP_STATUS_SUCCESS){ const{lat =null, lng=null} = r.point; } }); }catch(e){ console.log(e) } }) }
因为我们不需要地图效果,因此只需要获取到经纬度就好,这边执行完就已经可以获取到经纬度了。
在控制台区域可以看到我们打印出来的console.log(r,“aaaa”);证明已经获取成功。
接着就是上送经纬度到后端接口。
四、如果需要地图效果
1、如果需要地图效果或者其他形式都可以参考百度地图开放平台里的示例demo
创建一个容器,当然初始的ak密钥script还是需要的
// 以下代码直接复制的百度地图api <div id="allmap"></div>
<script type="text/javascript"> // 百度地图API功能 var map = new BMap.Map("allmap"); var point = new BMap.Point(116.331398,39.897445); map.centerAndZoom(point,12); var geolocation = new BMap.Geolocation(); geolocation.getCurrentPosition(function(r){ if(this.getStatus() == BMAP_STATUS_SUCCESS){ var mk = new BMap.Marker(r.point); map.addOverlay(mk); map.panTo(r.point); alert('您的位置:'+r.point.lng+','+r.point.lat); } else { alert('failed'+this.getStatus()); } },{enableHighAccuracy: true})
五、百度api文献参考
- 点赞
- 收藏
- 分享
- 文章举报
相关文章推荐
- 使用html5获取当前手机的经纬度,并接入百度地图API,查询出当前位置
- 使用html5获取当前手机的经纬度,并接入百度地图API,查询出当前位置
- 继上篇文章补全:如何使用百度地图api获取地区经纬度--【实际项目中】
- 使用html5获取当前手机的经纬度,并接入百度地图API,查询出当前位置
- Vue前后端分离项目与vue-baidu-map百度地图api整合使用步骤
- Android Map Api 使用和开发(2) 定位我的位置、地图弹出泡泡、通过经纬度获取地址
- java调用百度地图API根据地理位置中文获取经纬度
- vue项目中使用axios实现简单前后端交互
- 用户Ip地址和百度地图api接口获取用户地理位置(经纬度坐标,城市)
- vue使用腾讯地图获取当前位置
- 从零开始搭建前后端分离的NetCore2.2(EF Core CodeFirst+Autofac)+Vue的项目框架之十一Swagger使用一
- java调用百度地图API根据地理位置获取经纬度
- 百度地图API,获取地址的经纬度,根据坐标位置获取地理位置,,获取两个地理坐标的直线距离
- 如何在Vue项目中使用Mockjs,模拟接口返回的数据,实现前后端分离独立开发
- 使用前端路由 history 模式的前后端配置说明(Vue、Vue-Router、Webpack、tomcat 项目)
- Vue调用微信sdk,实现获取地理位置经纬度,支付等
- GPS项目\通过经纬度获取地址信息之百度地图API
- 使用html5定位经纬度然后用百度api获取城市等位置信息
- Android Map Api 使用和开发(2) 定位我的位置、地图弹出泡泡、通过经纬度获取地址
- javascript使用百度地图api和html5特性获取浏览器位置