获取地理位置(经度，纬度)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 }

//在页面调用如下：
import util from '../../util.js';
util.getAuthorizeInfo(callback)
function callback(res){
console.log(res)//经度纬度在此结果中
}

`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; } }); },

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) { } },

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

小程序

APP（ios/andriod）

APP/小程序

H5

相关推荐

`APP（ios/andriod）`

`APP/小程序`