小程序使用高德地图获取地理位置

(一)小程序集成Bmob作为数据存储
(二)小程序中Flex布局
(三)小程序使用高德地图获取地理位置
(四)小程序列表条目点击
(五)小程序下拉刷新、上拉加载
(六)小程序总结

这里写图片描述
小程序官方文档只提供我们获取到经纬度,并没有获取到相关地理位置的信息,因此需要用到第三方的api来获取
我这里用高德地图api来获取地理位置的信息

1、注册高德地图开发者
2、创建应用、获取Key
这里写图片描述

3、下载小程序SDK放到小程序项目中
4、设置安全通讯域名
登录微信公众平台,“设置“–>"开发设置"设置request合法域名,将https://restapi.amap.com 中添加进去
这里写图片描述
5、代码实现
首先在.js文件中引入

var amapFile = require('../../utils/amap-wx.js');

 onLoad: function (options) {



    wx.showLoading({
      title: 'Loading...',
    })


    that = this

    wx.getLocation({
      type: 'wgs84',
      success: function (res) {
        var latitude = res.latitude
        var longitude = res.longitude
        var speed = res.speed
        var accuracy = res.accuracy




        var markersData = {
          latitude: latitude,//纬度
          longitude: longitude,//经度
          key: that.data.MapKey
        };

        var addArr = [];
        var myAmapFun = new amapFile.AMapWX({ key: that.data.MapKey });

        myAmapFun.getRegeo({

          success: function (data) {



            console.log(data[0].regeocodeData.pois)
            // console.log(data)
            var dataAll = data[0].regeocodeData.pois;
            console.log(dataAll.length)
            for (var i = 0; i < dataAll.length; i++) {


              addArr.push({ "id": i, "address": dataAll[i] })
            }

            that.setData({ address: addArr })

            wx.hideLoading()
          }

        });
      }
    })


  },

源码下载

  • 3
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值