获取当前地理位置

 

yarn add weixin-js-sdk AMap

import wx from 'weixin-js-sdk'

import AMap from 'AMap'

/**
 * @description 获取定位信息
 * @author ricky
 * @param
 * @return
 */

const isWechat = navigator.userAgent.toLowerCase().indexOf('micromessenger') !== -1
export const getPosition = () => {
    return new Promise((resolve, reject) => {
        if (isWechat) {
            wx.getLocation({
                type: 'wgs84', // 默认为wgs84的gps坐标,如果要返回直接给openLocation用的火星坐标,可传入'gcj02'
                success: function(res) {
                    // 通过jssdk获取经纬度,再使用百度地图websericeApi进行逆地址解析
                    let location = `${res.latitude},${res.longitude}`
                    let url = `http://api.map.baidu.com/reverse_geocoding/v3/?ak=${BMAP_KEY}&output=json&coordtype=wgs84ll&location=${location}`
                    resolve(res)
                    vm.jsonp(url).then((data) => {
                        setPosition(data.result.addressComponent)
                    })
                },
                fail: (err) => {
                    console.log(err)
                    reject()
                }
            })
        } else {
            // 高德地图获取定位
            const map = new AMap.Map('container')
            map.plugin('AMap.Geolocation', function() {
                var geolocation = new AMap.Geolocation({ timeout: 8000 })
                geolocation.getCurrentPosition()
                AMap.event.addListener(
                    geolocation,
                    'complete',
                    (data) => {
                        setPosition(data.addressComponent, data.position.lng, data.position.lat)
                        resolve({
                            latitude: data.position.lat,
                            longitude: data.position.lng
                        })
                    }
                    // setPosition(data.addressComponent, null, null)
                )
                AMap.event.addListener(geolocation, 'error', (err) => {
                    console.log(err)
                    reject()
                })
            })
        }
    })
}
/**
 * @description 保存地理位置信息
 * @author ricky
 * @param
 * @return
 */
const setPosition = (position, longitude, latitude) => {
    store.dispatch('setPosition', {
        longitude: longitude,
        latitude: latitude,
        provinceCode: parseInt(Number(position.adcode) / 100) * 100,
        cityCode: parseInt(Number(position.adcode) / 10000) * 10000,
        areaCode: position.adcode,
        province: position.province,
        city: position.city,
        area: position.district
    })
}

 

腾讯地图api

http://apis.map.qq.com/ws/location/v1/ip?ip=59.58.96.18&key=youkey

 

3YJBZ-KMCEX-ISX45-ZMY7Z-HQPUO-RTFTJ

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值