vue定位---获取当前位置的详细信息

vue如何获取当前位置的详细信息，总共分为5步。

1、在build文件夹下webpack.base.conf.js文件里面的module.exports中添加如下代码；

externals: {'BMap': 'BMap'}

2、在项目的根目录下，找到index.html文件，添加如下代码；

<script src="https://api.map.baidu.com/api?v=2.0&ak=此处填写申请的百度地图AK"></script>

3、在页面引入

import BMap from 'BMap';

4、在需要获取的位置加上标签。如下；

<div id="allmap" style="width: 0;height: 0; display: none;">点击刷新</div>

5、在js中写入相关配置，代码如下；

local(){//若需赋值，在此记得定义thatconst that=thisconst map = new BMap.Map("allmap");const point = new BMap.Point(101.77,37.27);map.centerAndZoom(point,12);const geolocation = new BMap.Geolocation();geolocation.getCurrentPosition(function(r){const mk = new BMap.Marker(r.point);map.addOverlay(mk);map.panTo(r.point);const point = new BMap.Point(r.point.lng,r.point.lat);const gc = new BMap.Geocoder();gc.getLocation(point, function(rs){const addComp = rs.addressComponents; const address = rs.address;that.accidentForm.orgLocation = rs.address;that.mapInfo.city = addComp.city;});},{enableHighAccuracy: true})},

至此，获取当前位置的定位就完成了。效果如下；

vue定位---获取当前位置的详细信息相关推荐

vue定位获取用户位置信息
关于定位功能尝试了很多种方法,h5定位,百度地图定位,高德地图定位,因为ip定位只能定位到城市,所以我选用的是浏览器定位.总结如下: H5定位:定位相对较准,但是部分浏览器不兼容,我主要是在手机上测试 ...
用WMI获取远程机器操作系统的详细信息
使用WMI获取远程机器操作系统的详细信息大杂烩-.NET 代码主题部分的OperatingSystem类,是使用工具(Management (WMI) Extensions for Visual S ...
linux 获取模块,get_module - 获取Linux内核模块的详细信息
补充说明 get_module命令用于获取Linux内核模块的详细信息. 语法 get_module 模块名实例使用lsmod命令查看内核模块: lsmod | head -5 Module S ...
taobao.trade.fullinfo.get( 获取单笔交易的详细信息 )、淘宝店铺卖出订单详情接口，店铺订单明文接口，店铺订单解密接口，店铺订单消息推送接口
taobao.trade.fullinfo.get( 获取单笔交易的详细信息 ),淘宝店铺卖出订单详情接口,对接该接口可用于获取淘宝店铺订单详情信息,包括卖出订单详情,买家姓名,买家电话,买家收货地址 ...
taobao.trade.fullinfo.get( 获取单笔交易的详细信息 )、淘宝店铺卖出订单详情接口，淘宝店铺订单明文接口，淘宝店铺订单解密接口
taobao.trade.fullinfo.get( 获取单笔交易的详细信息 ),淘宝店铺卖出订单详情接口,对接该接口可用于获取淘宝店铺订单详情信息,包括卖出订单详情,买家姓名,买家电话,买家收货地址 ...
taobao.trade.fullinfo.get( 获取单笔交易的详细信息API接口)，淘宝店铺订单明文接口代码分享
采用官方taobao.trade.fullinfo.get( 获取单笔交易的详细信息 )接口拿到店铺订单详情,包括:买家信息,交易创造时间,商品交易数据,商品订单号,付款时间,付款金额,收货人手机号码 ...
PC企业微信HOOK接口，获取指定好友的详细信息
简要描述获取指定好友的详细信息操作码 102017 请求说明参数名必选类型说明 type 是 int 类型 user_id 是 string 用户id syncKey 是 string 同 ...
查看pip安装的python包的位置等详细信息
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录一.切换到指定的python环境二.列出当前环境下所安装的所有包并对特定包查找很多小白通过pip安装python包之后, ...
微信端H5使用百度地图定位获取当前位置安卓定位不准
微信端H5使用百度地图定位获取当前位置安卓定位不准的问题解决如下: 使用微信端定位,签名方法看微信接口文档: <script type="text/javascript"&g ...

vue定位---获取当前位置的详细信息

vue定位---获取当前位置的详细信息相关推荐

最新文章

热门文章