前端analysis | 3w & 1h

《微信小程序》- 谈一谈定位api的使用

2020-04-02

定位api需求

  • 根据attitude,lottitde,获取地理位置
  • 或者能直接调用api,返回地理位置

方案一

  • 根据微信小程序官网,如下代码,得到attitude,lottitde。
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    wx.getLocation({
    type: 'wgs84',
    success (res) {
    const latitude = res.latitude
    const longitude = res.longitude
    const speed = res.speed
    const accuracy = res.accuracy
    }
    })

  • 根据attitude,lottitde,计算得到位置。
    还需要知道很多地理位置数据,然后计算,理论可以,但不可行。

方案二

  • 直接使用百度地图api
    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
    var BMap = new bmap.BMapWX({ 
    ak: '您的ak'
    });
    var fail = function(data) {
    console.log(data)
    };
    var success = function(data) {
    wxMarkerData = data.wxMarkerData;
    that.setData({
    markers: wxMarkerData
    });
    that.setData({
    latitude: wxMarkerData[0].latitude
    });
    that.setData({
    longitude: wxMarkerData[0].longitude
    });
    }
    // 发起regeocoding检索请求
    BMap.regeocoding({
    fail: fail,
    success: success,
    iconPath: '../../img/marker_red.png',
    iconTapPath: '../../img/marker_red.png'
    });
  • 能满足条件,但是有个限制,就是需要引入map组件,
    map组件,对于不需要的来说,就有点鸡肋了。

方案三

  • 使用高德地图

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    var myAmapFun = new amapFile.AMapWX({key:'高德Key'});
    myAmapFun.getRegeo({
    success: function(data){
    //成功回调
    },
    fail: function(info){
    //失败回调
    console.log(info)
    }
    })
    1
    2
    3
    <view class="map_container">
    <!--定义页面结构,可以使用地图组件也能使用其他组件 -->
    </view>
  • 直接调用api,就行,无额外的引入,简单

使用支付宝打赏
使用微信打赏

若你觉得我的文章对你有帮助,欢迎点击上方按钮对我打赏