获取地理位置(经度，纬度)H5/小程序/APP

获取地理位置(经度，纬度) H5/小程序/APP

小程序

一般来说获取小程序可以通过授权getLocationInfo获取，用户进入小程序只会弹出一次授权地理位置信息。方法如下:

//封装以下方法到util.js文件中 //小程序记录位置需要授权位置信息 function getAuthorizeInfo(a='scope.userLocation',callback){ //1. uniapp弹窗弹出获取授权（地理，个人微信信息等授权信息）弹窗 uni.authorize({ scope: a, success() { //1.1 允许授权 getLocationInfo(callback); }, fail(){ //1.2 拒绝授权 } }) } function getLocationInfo(callback){ //2. 获取地理位置 uni.getLocation({ type: 'wgs84', success (res) { let result={}; result.latitude=res.latitude.toString(); result.longitude=res.longitude.toString(); callback&&callback(result); } }); export default { getLocationInfo, getAuthorizeInfo }

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
//在页面调用如下：
import util from '../../util.js';
util.getAuthorizeInfo(callback)
function callback(res){
console.log(res)//经度纬度在此结果中
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

APP（ios/andriod）

需要在manifest中配置

appkey需要在高德地图-》控制台-》应用-》添加应用 key名称自己设置

配置完成就会获取KEY值。将项目云打包即可。

APP/小程序

这个方法对APP小程序同样适用 不需要在manifest中配置

需要在高德地图-》控制台-》应用-》添加应用->选择微信小程序。

点击微信小程序SDK ->相关下载 ->下载 引入到项目中 //代码如下：在需要的页面引入 import amap from '../../js/common/amap-wx.js'; data() { return { key：'小程序的key值' latitude:'', longitude:''， amapPlugin：null } }, onload(){ this.getlocation() }, //methods获取方法 getlocation(){ this.amapPlugin = new amap.AMapWX({key: this.key}); this.amapPlugin.getRegeo({ success: (res) => { this.latitude = res[0].latitude; this.longitude = res[0].longitude; } }); },

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26

H5

需要在高德地图-》控制台-》应用-》添加应用->选择web端(js API)

因为是用vue框架。不像HTML不能引入外部网络js。所以自己封装方法在tools.js文件中。此方法加载较慢。

export default function MapLoader() {
  return new Promise((resolve, reject) => {
    if (window.AMap) {
      resolve(window.AMap);
    } else {
var script = document.createElement('script');
 script.type = 'text/javascript';
 script.async = true;
script.src = 'https://webapi.amap.com/maps?v=1.4.15&key='这里是key值'cba&callback=initAMap';
script.onerror = reject;
  document.head.appendChild(script);
    }
    window.initAMap  = () => {
      resolve(window.AMap);
    };
   })
  }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
//在页面使用如下： //引入 import AMap from '../../js/common/tools.js' data() { return { resAmap:null, initLat:30.64295,//初始维度 initLng:116.368904,//初始经度 } }， //方法 async initAMap() { console.log('this.initAMap()') try { this.resAmap = await AMap(); this.$nextTick(function() { // this.getBroewerLatLng(); var map = new this.resAmap.Map('map', { center: [this.initLng, this.initLat], zoom: 13 }); this.resAmap.plugin('AMap.Geolocation', () => { var geolocation = new this.resAmap.Geolocation({ enableHighAccuracy: true, //是否使用高精度定位，默认:true timeout: 10000, //超过10秒后停止定位，默认：5s buttonPosition: 'RB', //定位按钮的停靠位置 // buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20) zoomToAccuracy: true, //定位成功后是否自动调整地图视野到定位点 }); map.addControl(geolocation); geolocation.getCurrentPosition(function(status, result) { if (status == 'complete') { onComplete(result) } else { onError(result) } }); }); //解析定位结果; var then=this; function onComplete(data) { then.latitude = data.position.lat; then.longitude = data.position.lng; then.requestGoodsDetail(); } function onError(data) { console.log(data) // 定位失败的信息 } }) }catch (e) { } },

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
赞 (0)

相关推荐