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");
}
})