微信小程序地图与位置相关操作

微信小程序地图与位置相关操作

• 1、地图
• • 1.1 map的API
  • 1.2 简单地图示例
  • 1.3 MapContext对象常用操作
  • 1.4 地图操作示例
• 2、位置
• • 2.1 位置API
  • • 2.1.1 wx.getLocation(Object object)
    • 2.1.2 wx.openLocation(Object object)
    • 2.1.3 wx.chooseLocation()
  • 2.2 wx.openLocation()案例
  • 2.3 wx.chooseLocation()案例

1、地图

  map是一个比较复杂的组件，他有很多参数，如下表所示。

1.1 map的API

属性	类型	默认值	必填	说明	最低版本
longitude	number		是	中心经度	1.0.0
latitude	number		是	中心纬度	1.0.0
scale	number	16	否	缩放级别，取值范围为3-20	1.0.0
min-scale	number	3	否	最小缩放级别	2.13.0
max-scale	number	20	否	最大缩放级别	2.13.0
markers	Array.		否	标记点	1.0.0
covers	Array.		否	即将移除，请使用 markers	1.0.0
polyline	Array.		否	路线	1.0.0
circles	Array.		否	圆	1.0.0
controls	Array.		否	控件（即将废弃，建议使用 cover-view 代替）	1.0.0
include-points	Array.		否	缩放视野以包含所有给定的坐标点	1.0.0
show-location	boolean	false	否	显示带有方向的当前定位点	1.0.0
polygons	Array.		否	多边形	2.3.0
subkey	string		否	个性化地图使用的key	2.3.0
layer-style	number	1	否	个性化地图配置的 style，不支持动态修改
rotate	number	0	否	旋转角度，范围 0 ~ 360, 地图正北和设备 y 轴角度的夹角	2.5.0
skew	number	0	否	倾斜角度，范围 0 ~ 40 , 关于 z 轴的倾角	2.5.0
enable-3D	boolean	false	否	展示3D楼块(工具暂不支持）	2.3.0
show-compass	boolean	false	否	显示指南针	2.3.0
show-scale	boolean	false	否	显示比例尺，工具暂不支持	2.8.0
enable-overlooking	boolean	false	否	开启俯视	2.3.0
enable-zoom	boolean	true	否	是否支持缩放	2.3.0
enable-scroll	boolean	true	否	是否支持拖动	2.3.0
enable-rotate	boolean	false	否	是否支持旋转	2.3.0
enable-satellite	boolean	false	否	是否开启卫星图	2.7.0
enable-traffic	boolean	false	否	是否开启实时路况	2.7.0
enable-poi	boolean	true	否	是否展示 POI 点	2.14.0
enable-building	boolean		否	是否展示建筑物	2.14.0
setting	object		否	配置项	2.8.2
bindtap	eventhandle		否	点击地图时触发，2.9.0起返回经纬度信息	1.0.0
bindmarkertap	eventhandle		否	点击标记点时触发，e.detail = {markerId}	1.0.0
bindlabeltap	eventhandle		否	点击label时触发，e.detail = {markerId}	2.9.0
bindcontroltap	eventhandle		否	点击控件时触发，e.detail = {controlId}	1.0.0
bindcallouttap	eventhandle		否	点击标记点对应的气泡时触发e.detail = {markerId}	1.2.0
bindupdated	eventhandle		否	在地图渲染更新完成时触发	1.6.0
bindregionchange	eventhandle		否	视野发生变化时触发，	2.3.0
bindpoitap	eventhandle		否	点击地图poi点时触发，e.detail = {name, longitude, latitude}	2.3.0
bindanchorpointtap	eventhandle		否	点击定位标时触发，e.detail = {longitude, latitude}	2.13.0

  map组件的两个属性longitude和latitude表示当前地图中心的经度和纬度，和当前用户所在位置的经度和纬度是不同概念，无直接关系。例如，某然在广东省东菀市，但是可以打开北京天安门为中心的一幅地图，map的longitude和latitude是用来控制地图中心的参数，并不是用户实时的地理位置。

1.2 简单地图示例

pages/map/map.wxml

<map id="tu" latitude='23.099' longitude='113.325'  scale='12' class="tu" controls='{{con}}' markers='{{mar}}' bindcontroltap='con' bindmarkertap='mar'>
</map>

pages/map/map.js

Page({

data: {
mar:[{
inconPath:"location.png",
id:0,
latitude:23.088994,
longitude:113.324520,
width:50,
heigth:50

    }
    ]
  },

con:[{
id:1,
    iconPath:'location.png',
positon:{left:0,
top:50,
width:50,
height:50},
clickable:true
  }],

  mar:function(e)
  {console.log("你点了标记点")},

  con: function (e) { console.log("你点了游标") }
})

  map只能简单地生成一幅地图，要对地图进行操作，如进行缩放和移动操作，开发者必须在JS中获取MapContext对象，这时需要通过wx.createMapContext('id')获取MapContext对象。你可以理解为wx.createMapContext('id')就是指向地图的一个指针。

1.3 MapContext对象常用操作

接口	功能和用途
MapContext.getCenterLocation(Object object)	获取当前地图中心的经纬度。返回的是 gcj02 坐标系，可以用于 wx.openLocation()
MapContext.setLocMarkerIcon(Object object)	设置定位点图标，支持网络路径、本地路径、代码包路径
MapContext.moveToLocation(Object object)	将地图中心移置当前定位点，此时需设置地图组件 show-location 为true。‘2.8.0’ 起支持将地图中心移动到指定位置。
MapContext.translateMarker(Object object)	平移marker，带动画。
MapContext.includePoints(Object object)	缩放视野展示所有经纬度
MapContext.getRegion(Object object)	获取当前地图的视野范围
MapContext.getScale(Object object)	获取当前地图的缩放级别

  需要说明的是MapContext.getRegion()接口获取图片的范围，即是经度和纬度的取值范围，取值范围是以地图的西南和东北两个顶点的经度和纬度来限定的。MapContext.translateMarker()和MapContext.includePoints()两个接口中需要用到的经度和纬度不能超出MapContext.getRegion()接口的经度和纬度取值范围。

1.4 地图操作示例

MapContext.wxml

<map 
  id="ditu" 
  style="width: 710rpx; height: 250px;" 
  latitude="{{latitude}}" 
  longitude="{{longitude}}" 
  markers="{{markers}}" 
  show-location>
</map>
<button bindtap="getCenterLocation" type="primary">获取地图中心的经纬度</button>
<button bindtap="moveToLocation"  type="primary">将地图中心移动到当前定位点</button>
<button bindtap="translateMarker" type="primary">平移marker，带动画</button>
<button bindtap="includePoints" type="primary">缩放视野展示所有经纬度</button>
<button bindtap="scaleClick" type="primary">获取当前地图的缩放级别</button>
<button bindtap="getRegionClick" type="primary">获取当前地图的视野范围</button>

MapContext.js

Page({
  data: {
    latitude: 22.557416086996245,
    longitude: 113.3832685578842,
    markers: [{
      id: 1,
      latitude: 22.557416086996245,
      longitude: 113.3832685578842,
      name: '中山北站'
    }],
  },
  onReady: function (e) {
    //创建 map 上下文 MapContext 对象。
    this.zhizhen = wx.createMapContext('ditu')
  },
  //获取当前地图中心的经纬度
  getCenterLocation: function () {
    this.zhizhen.getCenterLocation({
      success: function (res) {
        console.log(res.longitude)
        console.log(res.latitude)
      }
    })
  },
  //将地图中心移动到当前定位点
  moveToLocation: function () {
    this.zhizhen.moveToLocation()
  },
  //平移marker，带动画
  translateMarker: function () {
    this.zhizhen.translateMarker({
      markerId: 1,
      autoRotate: true,
      duration: 2000,
      destination: {
        latitude: 22.55229,
        longitude: 113.3845211,
      },
      animationEnd() {
        console.log('animation end')
      }
    })
  },
  //缩放视野展示所有经纬度
  includePoints: function () {
    this.zhizhen.includePoints({
      padding: [10],
      points: [{
        latitude: 22.54229,
        longitude: 113.3745211,
      }, {
          latitude: 22.55229,
          longitude: 113.3845211,
      }]
    })
  },
  //获取当前地图的缩放级别
  scaleClick: function () {
    this.zhizhen.getScale({
      success: function (res) {
        console.log(res.scale)
      }
    })
  },
  //获取当前地图的视野范围
  getRegionClick: function () {
    this.zhizhen.getRegion({
      success: function (res) {
        console.log(res.southwest)//西南角经纬度
        console.log(res.northeast)//东北角经纬度
      }
    })
  }
})

  点击获取地图中心的经纬度

  获取当前地图的视野范围：

  将地图中心移动到当前定位点：

平移marker:

小程序地图操作

2、位置

  小程序常用下面三个接口对位置进行操作。

2.1 位置API

2.1.1 wx.getLocation(Object object)

  该接口获取当前的地理位置

属性	类型	默认值	必填	说明	最低版本
type	string	wgs84	否	wgs84 返回 gps 坐标，gcj02 返回可用于 wx.openLocation 的坐标
altitude	boolean	false	否	传入 true 会返回高度信息，由于获取高度需要较高精确度，会减慢接口返回速度	1.6.0
isHighAccuracy	boolean	false	否	开启高精度定位	2.9.0
highAccuracyExpireTime	number		否	高精度定位超时时间(ms)，指定时间内返回最高精度，该值3000ms以上高精度定位才有效果	2.9.0
success	function		否	接口调用成功的回调函数
fail	function		否	接口调用失败的回调函数
complete	function		否	接口调用结束的回调函数（调用成功、失败都会执行）

2.1.2 wx.openLocation(Object object)

  使用微信内置地图查看位置

属性	类型	默认值	必填	说明
latitude	number		是	纬度，范围为-90~90，负数表示南纬。使用 gcj02 国测局坐标系
longitude	number		是	经度，范围为-180~180，负数表示西经。使用 gcj02 国测局坐标系
scale	number	18	否	缩放比例，范围5~18
name	string		否	位置名
address	string		否	地址的详细说明
success	function		否	接口调用成功的回调函数
fail	function		否	接口调用失败的回调函数
complete	function		否	接口调用结束的回调函数（调用成功、失败都会执行）

示例代码：

wx.getLocation({
 type: 'gcj02', //返回可以用于wx.openLocation的经纬度
 success (res) {
   const latitude = res.latitude
   const longitude = res.longitude
   wx.openLocation({
     latitude,
     longitude,
     scale: 18
   })
 }
})

2.1.3 wx.chooseLocation()

  打开地图选择位置。

属性	类型	默认值	必填	说明	最低版本
latitude	number		否	目标地纬度	2.9.0
longitude	number		否	目标地经度	2.9.0
success	function		否	接口调用成功的回调函数
fail	function		否	接口调用失败的回调函数
complete	function		否	接口调用结束的回调函数（调用成功、失败都会执行）

object.success 回调函数

参数

Object res

属性	类型	说明
name	string	位置名称
address	string	详细地址
latitude	number	纬度，浮点数，范围为-90~90，负数表示南纬。使用 gcj02 国测局坐标系
longitude	number	经度，浮点数，范围为-180~180，负数表示西经。使用 gcj02 国测局坐标系

2.2 wx.openLocation()案例

pages/openLocation/openLocation.js

//获取应用实例
var app = getApp()
Page({
  data: {
    motto: 'Hello World',
    userInfo: {}
  },
  //事件处理函数
  bindViewTap: function () {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
  onLoad: function () {
    console.log('onLoad')
    var that = this
    //调用应用实例的方法获取全局数据
    app.getUserInfo(function (userInfo) {
      //更新数据
      that.setData({
        userInfo: userInfo
      })
    })
    wx.getLocation({
      type: 'gcj02', // 返回可以用于wx.openLocation的经纬度
      success(res) {
        const latitude = res.latitude
        const longitude = res.longitude
        console.log(latitude + "---" + longitude)
        wx.openLocation({
          latitude,
          longitude,
          scale: 18
        })
      }
    })
   
  }
})

  这里先用wx.getLocation()接口获取经度和纬度，再用wx.openLocation()接口使用wx.getLocation()接口获取的经度和纬度打开位置地图。

2.3 wx.chooseLocation()案例

pages/chooseLocation/chooseLocation.js

//获取应用实例
var app = getApp()
Page({
  data: {
    motto: 'Hello World',
    userInfo: {}
  },
  //事件处理函数
  bindViewTap: function() {
    wx.navigateTo({
      url: '../openLocation/openLocation'
    })
  },
  onLoad: function () {
    console.log('onLoad')
    var that = this
    //调用应用实例的方法获取全局数据
    app.getUserInfo(function(userInfo){
      //更新数据
      that.setData({
        userInfo:userInfo
      })
    })


    wx.getLocation({
      type: 'wgs84', // 默认为 wgs84 返回 gps 坐标，gcj02 返回可用于 wx.openLocation 的坐标
      success: function(res){
          var latitude = res.latitude
          var longitude = res.longitude
          wx.chooseLocation({
            latitude: latitude,
            longitude: longitude,
            success: function(res){
                console.log(res)
            },
            fail: function() {
              // fail
            },
            complete: function() {
              // complete
            }
          })
      },
      fail: function() {
        // fail
      },
      complete: function() {
        // complete
      }
    })

  }
})

  本例先用wx.getLocation()接口获取经度和纬度，再用wx.chooseLocation()接口使用wx.getLocation()接口获取的经度和纬度选择打开地图位置，运行效果如下所示，注意在其右上角有一个“确定”按钮，该按钮即为wx.chooseLocation()接口选择二字的含义所在。