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

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

• ​​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

  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.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)

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

2.1.2 wx.openLocation(Object object)

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

示例代码：

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()

  打开地图选择位置。

object.success 回调函数

参数

Object res

2.2 wx.openLocation()案例

pages/openLocation/openLocation.js

//获取应用实例
var app = getApp()
Page({
  data: {
    motto: 'Hello World',
    userInfo: {}
  },
  //事件处理函数
  bindViewTap: function () {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
  onl oad: 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'
    })
  },
  onl oad: 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()​​接口选择二字的含义所在。