小程序学习之位置API

最新推荐文章于 2024-06-20 13:44:03 发布

baked_donut

最新推荐文章于 2024-06-20 13:44:03 发布

阅读量935

点赞数 2

分类专栏：微信小程序

微信小程序专栏收录该内容

32 篇文章 4 订阅

订阅专栏

1.位置信息

1）经纬度坐标

经纬度是由经度和纬度组成的坐标系统，又称地理坐标系统。经线又称子午线，是连接地球南北两级的半圆弧，只是南北方向；纬线被定义为地球表面上的某点随地球自转形成的轨迹，每两根纬线之间均为两两平行的圆形，指示东西方向。

2）坐标的类别

测量工作都需要有一个特定坐标系作为基准，因此国内外各有自己的测量基准和坐标系。小程序使用的坐标类型有wgs84坐标和gcj02坐标，且开发者工具目前仅支持gcj02坐标。

wgs84

gcj02

2.获取和选择位置

1）获取位置

使用wx.getLocation(OBJECT)获取当前设备的地理位置、速度等信息。当用户离开小程序后，此接口无法调用。当用户单击“显示在聊天顶部”时，此接口可继续调用。参数说明如下：

success()回调函数返回参数如下：

示例代码格式：

ps：需要在app.json中配置permission字段

//app.json
"permission":{
    "scope.userLocation":{
      "desc":"您的位置信息将用于小程序位置接口的效果展示"
    }
  }

示例代码：

<!--wxml-->
<view class="title">第九章 位置API</view>
<view class="demo-box">
  <view class="title">wx.getLocation(OBJECT)</view>
  <map latitude="{{lat}}" longitude="{{lon}}"></map>
  <button type="primary" bindtap="getLocation">获取位置</button>
  <view class="title">纬度：{{lat}}</view>
  <view class="title">经度：{{lon}}</view>
  <view class="title">速度：{{speed}}</view>
  <view class="title">精确度：{{accuaracy}}</view>
</view>

//js
Page({
  getLocation:function(){
    var that = this
    wx.getLocation({
      success: function(res) {
        that.setData({
          lat:res.latitude,
          lon:res.longitude,
          speed:res.speed,
          accuaracy:res.accuracy
        })
      }
    })
  }
})

2）选择位置

使用wx.chooseLocation(OBJECT)打开地图选择位置，该接口需要用户授权scope.userLocation，参数说明如下：

success（）返回参数如下：

示例代码格式如下：

示例代码：

<!--wxml-->
<view class="title">第九章 位置API</view>
<view class="demo-box">
  <view class="title">wx.chooseLocation(OBJECT)</view>
  <map latitude="{{lat}}" longitude="{{lon}}"></map>
  <button type="primary" bindtap="chooseLocation">选择位置</button>
  <view class="title">名称：{{name}}</view>
  <view class="title">地址：{{address}}</view>
  <view class="title">纬度：{{lat}}</view>
  <view class="title">经度：{{lon}}</view>
</view>

//js
Page({
  chooseLocation:function(){
    var that = this
    wx.chooseLocation({
      success: function(res) {
        that.setData({
          name: res.name,
          address: res.address,
          lat:res.latitude,
          lon:res.longitude
        })
      }
    })
  }
})

3.查看位置

使用wx.openLocation(OBJECT)打开微信内置地图查看位置，该接口需要用户授权scope.userLocation，参数说明如下：

示例代码格式如下：

ps：除查看地图可用外，查看周边和开启导航功能失效

示例代码：

<!--wxml-->
<view class="title">第九章 位置API</view>
<view class="demo-box">
  <view class="title">wx.openLocation(OBJECT)</view>
  <button type="primary" bindtap="openLocation">查看当前位置</button>
</view>

//js
Page({
  openLocation:function(){
    wx.getLocation({
      type: 'gcj02', //返回可用于wx.openLocation()的经纬度
      altitude: true,
      success: function(res) {
        var lat = res.latitude
        var lon = res.longitude
        wx.openLocation({
          latitude: lat,
          longitude: lon
        })
      }
    })
  }
})

4.地图组件控制

1）获取地图上下文对象

使用wx.createMapContext(map,this)创建并返回地图上下文对象mapContext，mapContext通过mapId跟WXML页面上的<map>组件绑定，并可以进一步操作对应的<map>组件。

mapContext对象包含了6种方法用于操作<map>组件，其方法说明如下：

在接下来2-7里详细介绍这六种方法。

2）获取地图中心坐标

使用getCenterLocation(OBJECT)获取当前地图中心的经纬度，其参数说明如下：

示例代码：

<!--wxml-->
<view class="title">第九章 位置API</view>
<view class="title">3.地图组件控制的简单应用</view>
<view class="demo-box">
  <view class="title">mapCtx.getCenterLocation(OBJECT)</view>
  <map id="myMap"></map>
  <button type="primary" bindtap="getCenterLocation">获取位置</button>
  <view class="title">纬度：{{lat}}</view>
  <view class="title">经度：{{lon}}</view>
</view>

//js
Page({
  getCenterLocation: function () {
   var that = this
   this.mapCtx.getCenterLocation({
     success:function(res){
       that.setData({
         lat:res.latitude,
         lon:res.longitude
       })
     }
   })
  },
  onReady:function(){
    this.mapCtx = wx.createMapContext("myMap");
  }
})

3）移动到指定位置

使用moveToLocation()将地图中心移动到当前定位点，需要配合<map>组件的show-location使用。

示例代码：

<!--wxml-->
<view class="title">第九章 位置API</view>
<view class="title">3.地图组件控制的简单应用</view>
<view class="demo-box">
  <view class="title">mapCtx.moveToLocation(OBJECT)</view>
  <map id="myMap" latitude="31.350790" longitude="118.412190" show-location></map>
  <button type="primary" bindtap="moveToLocation">移动位置</button>
</view>

//js
Page({
  moveToLocation: function () {
    this.mapCtx.moveToLocation();
  },
  onReady: function () {
    this.mapCtx = wx.createMapContext("myMap");
  }
})

4）动画平移标记

使用translateMarker(OBJECT)动画平移标记，参数说明如下：

示例代码：

<!--wxml-->
<view class="title">第九章 位置API</view>
<view class="title">3.地图组件控制的简单应用</view>
<view class="demo-box">
  <view class="title">mapCtx.translateMarker(OBJECT)</view>
  <map id="myMap" latitude="{{lat}}" longitude="{{lon}}" markers="{{markers}}"></map>
  <button type="primary" bindtap="translateMarker">平移标记</button>
</view>

//js
Page({
  data:{
    lat:39.917940,
    lon:116.397140,
    markers:[{
      id:'001',
      latitude:39.911810,
      longitude:116.394800,
      iconPath:'/images/location.png',
      label:{
        content:'故宫博物院'
      }
    }]
  },
  translateMarker: function () {
    this.mapCtx.translateMarker({
      markerId:'001',
      autoRotate:true,
      duration:1000,
      destination:{
        latitude:39.917940,
        longitude:116.397140
      }
    })
  },
  onReady: function () {
    this.mapCtx = wx.createMapContext("myMap");
  }
})

5）展示全部坐标

使用includePoints(OBJECT)展示所有指定的经纬度，必要时会缩放视野，参数说明如下：

示例代码：

<!--wxml-->
<view class="title">第九章 位置API</view>
<view class="title">3.地图组件控制的简单应用</view>
<view class="demo-box">
  <view class="title">mapCtx.includePoints(OBJECT)</view>
  <map id="myMap"></map>
  <button type="primary" bindtap="includePoints">展示指定经纬度</button>
</view>

//js
Page({
  includePoints: function () {
    this.mapCtx.includePoints({
      padding:[10],
      points:[{
        //安徽黄山风景区
        latitude:30.129590,
        longitude:118.174940
      },{
        //安徽九华山风景区
        latitude: 30.471110,
        longitude: 117.804250
      }]
    })
  },
  onReady: function () {
    this.mapCtx = wx.createMapContext("myMap");
  }
})

6）获取视野范围

使用getRegion(OBJECT)获取当前地图的视野范围，参数说明如下：

示例代码：

<!--wxml-->
<view class="title">第九章 位置API</view>
<view class="title">3.地图组件控制的简单应用</view>
<view class="demo-box">
  <view class="title">mapCtx.getRegion(OBJECT)</view>
  <map id="myMap"></map>
  <button type="primary" bindtap="getRegion">获取视野范围</button>
</view>

//js
Page({
  getRegion: function () {
    this.mapCtx.getRegion({
     success:function(e){
       console.log(e)
     }
    })
  },
  onReady: function () {
    this.mapCtx = wx.createMapContext("myMap");
  }
})

7）获取地图缩放级别

使用getScale(OBJECT)获取当前地图的缩放级别，参数说明如下：

示例代码：

<!--wxml-->
<view class="title">第九章 位置API</view>
<view class="title">3.地图组件控制的简单应用</view>
<view class="demo-box">
  <view class="title">mapCtx.getScale(OBJECT)</view>
  <map id="myMap"></map>
  <button type="primary" bindtap="getScale">获取缩放级别</button>
  <view class="title">缩放级别：{{scale}}</view>
</view>

//js
Page({
  getScale: function () {
    var that = this
    this.mapCtx.getScale({
      success: function (res) {
        let scale = res.scale
        that.setData({
          scale:scale
        })
      }
    })
  },
  onReady: function () {
    this.mapCtx = wx.createMapContext("myMap");
  }
})