微信小程序获取当前位置显示

今天弄了下微信小程序里获取当前位置。

首先有一个官方的demo，但是这个demo里只有获取当前位置的经度和纬度坐标。不是我想要的，我要的是一般地图里那种点击button地图上定位到我的当前位置。百度了一下，然后自己尝试了一下，代码如下。

index.wxml里没什么，<map>标签直接copy官方demo里的即可。

<view class="page-body">

  <view>
<map id="map" 
  longitude="{{longitude}}"
  latitude="{{latitude}}"
  scale="14" 
  controls="{{controls}}" 
  bindcontroltap="controltap" 
  markers="{{markers}}" 
  bindmarkertap="markertap" 
  polyline="{{polyline}}" 
  bindregionchange="regionchange" 
  show-location 
  style="width: 100%; height: 300px;">
  </map>
  </view>
  <view class="usermotto">
    <text class="user-motto">{{motto}}</text>
    <button bindtap="getCenterLocation" type="primary">获取位置</button>
    <text >经度：{{longitude}}</text>
    <text >纬度：{{latitude}}</text>
  </view>
    
</view>

index.js里，主要就是调到wx.getLocation来实现的。

//index.js
//获取应用实例
const app = getApp()

Page({
  data: {
    motto: 'Hello World',
    latitude: 30.560385546235004,
    longitude: 114.19691428542137,
    markers: [{
      id: 1,
      iconPath: '/image/location.png',
      latitude: 30.560385546235004,
      longitude: 114.19691428542137,
      name: '中铁国际城',
      callout: { content : '中铁国际城'}
    }],
    controls: [
      {
        id: 1,
        iconPath: '/image/location.png',
        position: {
          top: 300 - 50,
          width: 30,
          height: 30
        },
        clickable: true
      }
    ]
  },
  //事件处理函数
  onReady: function (e) {
    this.mapCtx = wx.createMapContext('map')
  },
  getCenterLocation: function () {
    var that = this;
    this.mapCtx.getCenterLocation({
      success: function (res) {
        console.log(res.longitude)
        console.log(res.latitude)
        that.setData({
          latitude: res.latitude,//纬度 
          longitude: res.longitude,//经度
        })
      }
    })
  },
  controltap(e) {
    var that = this;
    wx.getLocation({
      type: 'gcj02', //返回可以用于wx.openLocation的经纬度
      success: function (res) {
        var latitude = res.latitude
        var longitude = res.longitude
        that.setData({
          latitude: latitude,//纬度 
          longitude: longitude,//经度 

        })
      }
    })
  }


  
})