美文网首页微信小程序微信小程序微信小程序开发资料收集区
微信小程序实现城市定位:获取当前所在的国家城市信息

微信小程序实现城市定位:获取当前所在的国家城市信息

作者: 一斤代码 | 来源:发表于2017-01-13 14:19 被阅读18949次

    微信小程序中,我们可以通过调用wx.getLocation()获取到设备当前的地理位置信息,这个信息是当前位置的经纬度。如果我们想获取当前位置是处于哪个国家,哪个城市等信息,该如何实现呢?

    微信小程序中并没有提供这样的API,但是没关系,有wx.getLocation()得到的经纬度作为基础就够了,其他的,我们可以使用其他第三方地图服务可以来实现,比如腾讯地图百度地图的API。

    以腾讯地图为例,我们可以去腾讯地图开放平台注册一个账号,然后在它的管理后台创建一个密钥(key)。

    然后在顶部菜单里面,可以找到WebServiceAPI菜单:

    腾讯地图WebServiceAPI

    腾讯地图提供了很多WebServiceAPI,比如按照地址获取经纬度,根据经纬度找地址,我们将要用到的就是根据经纬度找地址,也称作“逆地址解析”:

    逆地址解析

    逆地址解析提供由坐标到坐标所在位置的文字描述的转换,调用形式就是一个HTTP URL形式的API,基本用法如下:

    http://apis.map.qq.com/ws/geocoder/v1/?location=39.984154,116.307490&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77
    

    这个URL的基本参数就是一个经纬度坐标地址。你可以将这个URL中的key换成你自己的key,直接在浏览器中查看,就能看到类似这样的结果,还可以根据传入不同的参数选项,得到更丰富的信息:

    {
        "status": 0,
        "message": "query ok",
        "request_id": "6225548022856589453",
        "result": {
            "location": {
                "lat": 39.984154,
                "lng": 116.30749
            },
            "address": "北京市海淀区北四环西路66号彩和坊路",
            "formatted_addresses": {
                "recommend": "海淀区中关村彩和坊路中国技术交易大厦",
                "rough": "海淀区中关村彩和坊路中国技术交易大厦"
            },
            "address_component": {
                "nation": "中国",
                "province": "北京市",
                "city": "北京市",
                "district": "海淀区",
                "street": "彩和坊路",
                "street_number": "北四环西路66号"
            },
            "ad_info": {
                "adcode": "110108",
                "name": "中国,北京市,北京市,海淀区",
                "location": {
                    "lat": 39.984154,
                    "lng": 116.307487
                },
                "nation": "中国",
                "province": "北京市",
                "city": "北京市",
                "district": "海淀区"
            },
            "address_reference": {
                "business_area": {
                    "title": "中关村",
                    "location": {
                        "lat": 39.984058,
                        "lng": 116.307518
                    },
                    "_distance": 0,
                    "_dir_desc": "内"
                },
                "famous_area": {
                    "title": "中关村",
                    "location": {
                        "lat": 39.984058,
                        "lng": 116.307518
                    },
                    "_distance": 0,
                    "_dir_desc": "内"
                },
                "crossroad": {
                    "title": "彩和坊路/北四环西路辅路(路口)",
                    "location": {
                        "lat": 39.985001,
                        "lng": 116.308113
                    },
                    "_distance": 104.2,
                    "_dir_desc": "西南"
                },
                "village": {
                    "title": "稻香园北社区",
                    "location": {
                        "lat": 39.983269,
                        "lng": 116.301979
                    },
                    "_distance": 480.1,
                    "_dir_desc": "东"
                },
                "town": {
                    "title": "海淀街道",
                    "location": {
                        "lat": 39.984154,
                        "lng": 116.307487
                    },
                    "_distance": 0,
                    "_dir_desc": "内"
                },
                "street_number": {
                    "title": "北四环西路66号",
                    "location": {
                        "lat": 39.984119,
                        "lng": 116.307503
                    },
                    "_distance": 6.9,
                    "_dir_desc": ""
                },
                "street": {
                    "title": "彩和坊路",
                    "location": {
                        "lat": 39.984154,
                        "lng": 116.308098
                    },
                    "_distance": 49.1,
                    "_dir_desc": "西"
                },
                "landmark_l1": {
                    "title": "北京中关村创业大街",
                    "location": {
                        "lat": 39.984055,
                        "lng": 116.306992
                    },
                    "_distance": 43.9,
                    "_dir_desc": "东"
                },
                "landmark_l2": {
                    "title": "中国技术交易大厦",
                    "location": {
                        "lat": 39.984154,
                        "lng": 116.307487
                    },
                    "_distance": 0,
                    "_dir_desc": "内"
                }
            }
        }
    }
    

    从这个API的返回结果中,我们可以看到它包含了我们想要的地址信息,如国家,城市,区等。

    接下来,我们要在我们的代码中调用这个API。该API可以通过JSONP的方式调用,也可以在服务器端发起调用。我是在我自己的服务端中调用的,下面是我的代码,使用Node.js Express实现的,仅供参考:

    // 服务调用地址:http://localhost:3000/lbs/location
    
    router.get('/lbs/location', function (req, res, next) {
      let lat = req.query.latitude
      let lng = req.query.longitude
    
      request.get({
        uri: 'https://apis.map.qq.com/ws/geocoder/v1/',
        json: true,
        qs: {
          location: `${lat},${lng}`,
          key: '你的腾讯地图密钥key'
        }
      }, (err, response, data) => {
        if (response.statusCode === 200) {
          responseUtil.jsonSuccess(res, data)
        } else {
          responseUtil.jsonError(res, 10001, '')
        }
      })
    })
    

    然后,可以看一下在小程序端的Page代码:

    Page({
    
      data: {
        address: {}
      },
    
      onLoad: function () {
        //获取当前经纬度信息
        wx.getLocation({
          success: ({latitude, longitude}) => {
    
            //调用后台API,获取地址信息
            wx.request({
              url: 'http://localhost:3000/lbs/location',
    
              data: {
                latitude: latitude,
                longitude: longitude
              },
    
              success: (res) => {
                let info = res.data.data.result.ad_info
                this.setData({ address: info })
              },
    
              fail: () => {
              },
    
              complete: () => {
              }
            })
          }
        })
      }
    
    })
    

    以及一个简单的小程序界面,用于显示这些地址信息:

    <view>
      <view>{{address.nation}}</view>
      <view>{{address.city}}</view>
      <view>{{address.district}}</view>
    </view>
    

    运行结果如下所示:

    运行结果

    好了,如果你正遇到本文中所描述的问题,希望本文能帮到你。如果你有更好的方式,不吝分享。

    相关文章

      网友评论

      • 98bfc297d6ec:赞一个
        现在遇到一个问题 当调用了wx.chooseLocation的时候 如果选择的是当前定位的位置success返回值中的address和name是相等的
        现在要获取到市 使用的是字符串的split处理 但是res.address不是想要的address值 这种情况有没有比较好的处理方法
        现在是参考楼主的方法先获取到当前的位置 如果res.name = res.address就将res.address赋值为当前的位置
      • 02e413d12dc1:微信公众号关联小程序太复杂了
      • 817dc875147d:为什么我线上测试,获取当前城市失败,我线下测试就可以。是不是因为有权限限制了了?
        一斤代码:你在小程序中调用的是你自己的后台服务URL,还是直接调用腾讯地图的URL?
      • uncochen:国外好像不能解析
        uncochen: @一斤代码 可以解析,但是返回的数据结构不一样😬
        一斤代码:腾讯地图可能只有国内数据。国外试试google地图的api
      • 52hertzWhale:你好! 能告知 怎么在小程序中使用JSONP的方式调用吗? 万谢
        一斤代码:@52hertzWhale 你调用的时候是不是加了callback参数了?加了就会返回JSONP格式的(带有小括号的)调用结果。如果有callback参数,去掉再试试?
        52hertzWhale:@一斤代码 在小程序里面调用获取到的API 带有小括号的非JSON格式 无法解析...
        一斤代码:JSONP是在HTML里面通过使用script tag的方式来调用远程api以实现跨域调用。小程序里没有也不需要script tag这种方式,所以不存在JSONP。

        如果你是要在小程序里直接去调用那个逆地址解析API的话,使用wx.request()去调用它就行了。需要注意的是:
        1. 小程序里调用的时候要调用HTTPS的版本,即https://apis.map.qq.com/....
        2.在你的小程序后台管理里面,添加对https://apis.map.qq.com这个域名的访问权限
      • _一如既往:请问下你那段服务器上的代码是写在哪里的啊,能不能再具体点,我用的es5,一直报错,还有那个lbs/location的路径,是做什么的,怎么写啊
        一斤代码:我的服务器代码使用的是Node.js开发的,采用了Express框架(http://expressjs.com/en/4x/api.html#router),如果的后台服务不是Node.js的,可以只是做个代码逻辑的参考。
      • 知晓程序:你好!我们是爱范儿旗下专注于小程序生态的公众号知晓程序(微信号 zxcx0101)。我们很赞赏你的文章,希望能获得转载授权。授权后,你的文章将会在知晓程序社区(minapp.com)、爱范儿、AppSo 等渠道发布,我们会注明来源和作者姓名。

        :heart:
        知晓程序:@一斤代码 :heart:

      本文标题:微信小程序实现城市定位:获取当前所在的国家城市信息

      本文链接:https://www.haomeiwen.com/subject/ncqsbttx.html