900字范文,内容丰富有趣,生活中的好帮手!
900字范文 > vue移动端进入页面获取当前地理位置实现方法

vue移动端进入页面获取当前地理位置实现方法

时间:2020-11-08 10:39:58

相关推荐

vue移动端进入页面获取当前地理位置实现方法

话不多说,直接写方法步骤,需要的直接拿去放在自己项目中即可使用

先看下效果图:

第一步:在项目中index.html文件中引入高德地图,如图所示:

<!-- 获取地理位置 --><script type="text/javascript" src="/maps?v=1.3&key=d4332e5adb8b584442266763d20b978c"></script>

第二步:在项目中创建一个js文件,然后把下面的代码全部拷贝进去

/*** 高德地图定位* @type {{}}*/export const location = {initMap(id){let mapObj = new AMap.Map(id, {})let geolocation;mapObj.plugin(['AMap.Geolocation'], function () {geolocation = new AMap.Geolocation({enableHighAccuracy: true, // 是否使用高精度定位,默认:truetimeout: 10000, // 超过10秒后停止定位,默认:无穷大maximumAge: 0, // 定位结果缓存0毫秒,默认:0convert: true, // 自动偏移坐标,偏移后的坐标为高德坐标,默认:trueshowButton: true, // 显示定位按钮,默认:truebuttonPosition: 'LB', // 定位按钮停靠位置,默认:'LB',左下角buttonOffset: new AMap.Pixel(10, 20), // 定位按钮与设置的停靠位置的偏移量,默认:Pixel(10, 20)showMarker: true, // 定位成功后在定位到的位置显示点标记,默认:trueshowCircle: true, // 定位成功后用圆圈表示定位精度范围,默认:truepanToLocation: true, // 定位成功后将定位到的位置作为地图中心点,默认:truezoomToAccuracy: true // 定位成功后调整地图视野范围使定位位置及精度范围视野内可见,默认:false})mapObj.addControl(geolocation)geolocation.getCurrentPosition()})return geolocation;}}

第三步:在需要用到的页面引入你创建的这个js文件(下面这是我的引入路径可以替换成你的即可)

import { location } from "../../pages/utils/LocationUtil";

第四步:就是在你需要用到获取当前地理位置的页面调用方法。首先在methods方法中声明方法,然后在mounted挂在后调用声明的方法即可

methods: {/**获取地图定位*/getLocation() {let _that = this;let geolocation = location.initMap("map-container"); //定位AMap.event.addListener(geolocation, "complete", result => {_that.lat = result.position.lat;_that.lng = result.position.lng;_that.province = result.addressComponent.province;_that.city = result.addressComponent.city;_that.district = result.addressComponent.district;});},}mounted() {this.getLocation(); // 调用获取地理位置}

以上就是页面一进入弹出获取当前地理位置的实现方法,有需要的拿走直接用。

这个步骤以及使用方法我写的很清楚也很详细,谁都能看懂的,所以小白操作,直接拷贝粘贴即可。

以上文章还有些步骤需要更新,暂时没有时间呢,改天弄通了从头到尾重新梳理和整理一下再更新

喜欢博主的点关注,以后会多加更新问题和知识点!

大家相互学习,互相进步

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。