文本介绍了在公众号项目中获取用户位置并传递给服务端以获取附近门店距离的两种实现方法。方法一直接使用高德地图的原生SDK,包括注册高德地图、获取key、在项目中引入高德地图脚本、创建js文件编写定位代码、在需要定位的页面引入并调用这些定位代码。方法二使用vue-amap组件,通过npm安装、配置babel、在main.js中引入并初始化vue-amap,然后在页面中调用定位方法。同时,文中还提到了使用vue-amap时可能遇到的问题及解决方案,如npm安装警告、iOS 10中的定位权限修改、避免命名冲突、处理eslint报错等,并解释了定位超时和获取IP位置失败的可能原因。
公众号项目有一个需求,获取当前用户的位置,传给服务端,服务端返回具体各门店的距离。因为移动端都是用高德地图API地位,为了减少相对应的误差,公众号也选用高德地图。
方法一. 直接调用高德原生 SDK
1.注册高德地图和获取高德地图的key
2.项目中index.html文件中引入高德地图 (key代表上面获得的)
<!--高德key--> <script src="//webapi.amap.com/maps?v=1.3&key=03f14607c0f3122faa4*****930e27"></script>
3.在项目里创建一个js文件,文件目录如下:
js文件里定位代码为:
/** * 高德地图定位 * @type {{}} */ const location = { initMap(id){ let mapObj = new AMap.Map(id, {}) let geolocation; mapObj.plugin(['AMap.Geolocation'], function () { geolocation = new AMap.Geolocation({ enableHighAccuracy: true, // 是否使用高精度定位,默认:true timeout: 10000, // 超过10秒后停止定位,默认:无穷大 maximumAge: 0, // 定位结果缓存0毫秒,默认:0 convert: true, // 自动偏移坐标,偏移后的坐标为高德坐标,默认:true showButton: true, // 显示定位按钮,默认:true buttonPosition: 'LB', // 定位按钮停靠位置,默认:'LB',左下角 buttonOffset: new AMap.Pixel(10, 20), // 定位按钮与设置的停靠位置的偏移量,默认:Pixel(10, 20) showMarker: true, // 定位成功后在定位到的位置显示点标记,默认:true showCircle: true, // 定位成功后用圆圈表示定位精度范围,默认:true panToLocation: true, // 定位成功后将定位到的位置作为地图中心点,默认:true zoomToAccuracy: true // 定位成功后调整地图视野范围使定位位置及精度范围视野内可见,默认:false }) mapObj.addControl(geolocation) geolocation.getCurrentPosition() }) return geolocation; } } export default location
4.在需要调用定位的页面引入positionLocation.js文件
import location from '../utils/positionLocation'
5. 调用js中的方法,获取当前地理位置
<script> import location from '../utils/positionLocation' export default { name: 'home', data () { return { location: '', lat:0, lng:0 } }, methods: { /** 获取高德地图定位 */ getLocation () { let _that = this let geolocation = location.initMap('map-container') // 定位 AMap.event.addListener(geolocation, 'complete', result => { console.log(result) _that.lat = result.position.lat _that.lng = result.position.lng _that.location = result.formattedAddress }) } }, mounted() { this.getLocation(); // 调用获取地理位置 } }
打印结果为:
方法二.使用vue-amap
vue-amap是基于Vue2.x与高德的地图组件,数据状态与地图状态单向绑定,开发者无需关心地图的具体操作。
1.npm安装vue-amap
npm install vue-amap --save
2.在.babelrc文件中配置
{ "presets": [ ["es2015", {"modules": false}] ] }
3. 在main.js中引入vue-amap
import VueAMap from 'vue-amap'; Vue.use(VueAMap); // 初始化vue-amap AMap.initAMapApiLoader({ // 高德key key: '03f14607c0f3122faa4*****930e27', // 插件集合 (插件按需引入) plugin: ['AMap.Geolocation'] });
4. 页面调用方法
<template> <div class="amap-page-container"> <el-amap vid="amap" :plugin="plugin" class="amap-demo" :center="center"> </el-amap> <div class="toolbar"> <span v-if="loaded"> 当前位置为:{{adress}} </span> <span v-else>正在定位</span> </div> </div> </template> <style> .amap-demo { height: 300px; } </style> <script> module.exports = { data() { let that = this; return { center: [121.59996, 31.197646], adress:'', loaded: false, plugin: [{ pName: 'Geolocation', events: { init(o) { // o 是高德地图定位插件实例 o.getCurrentPosition((status, result) => { if (result && result.position) { // 如果key是企业的,还可以直接result.addressComponent获取省市,周边等信息 console.log(result); that.adress = result.formattedAddress; self.center = [result.position.lng, result.position.lat]; self.loaded = true; self.$nextTick(); } }); } } }] }; } }; </script>
调用结果:
总结问题:
1.npm install vue-amap --save 报如下警告
解决办法:
npm install -g npm
npm install stylus
2.定位时警告
原因 为: 在 IOS 10
中,苹果对 webkit
定位权限进行了修改,所有定位请求的页面必须是 https
协议的。如果是非 https
网页,在 http
协议下通过 html5
原生定位接口会返回错误,也就是无法正常定位到用户的位置,而已经支持 https
的网站则不会受影响。
3.注意vue-amap
的导入名不是 AMap, 避免和高德全局的
AMap
冲突。
4.若
eslint
报错 AMap is undefined
之类的错误。请将 AMap
配置到 .eslintrc
的 globals
中。
解决办法:
在.eslintrc.js 中引入 globals
globals: { 'AMap': false, },
5.提示 get geolocation timeout.get iplocation failed.
官方给出原因:
本篇独发金蝶云社区
您的鼓励与嘉奖将成为创作者们前进的动力,如果觉得本文还不错,可以给予作者创作打赏哦!
请选择打赏金币数 *