微信小程序—地图组件map-显示当前位置、获取经纬度

博客概要

     就，利用小程序的地图map组件实现单点定位并获取当前经纬度，做一个简单的分享~

组件map

1.运行结果

2.代码示例

     没给样式代码噢，自_己敲~希望读者务必别太懒哈= =

<!-- wxml -->
<map id="map" 
  latitude="{{latitude}}" 
  longitude="{{longitude}}"
  scale="13"  
  show-location
>
  <cover-view>
    <cover-view>
      经度：{{longitude}}
    </cover-view>
    <cover-view>
      纬度：{{latitude}}
    </cover-view>
  </cover-view>
</map>

// js
Page({
  data: {
  },
  onLoad: function () {
    var that = this;
    wx.getLocation({
      type: 'gcj02',
      success: function(res) {
        var latitude = res.latitude
        var longitude = res.longitude
        that.setData({
          latitude: latitude,
          longitude: longitude,
        })
      },
    })
  }
})

3.元素说明

map组件属性

属性	说明
longitude	中心经度
latitude	中心纬度
scale	缩放级别，取值范围为3-20
show-location	显示带有方向的当前定位点
…	…

• 更多内容点击跳转至官方文档：组件-地图-map

wx.getLocation接口

属性	说明
type	wgs84 返回 gps 坐标，gcj02 返回可用于 wx.openLocation 的坐标
success	接口调用成功的回调函数
…	…

Object res

属性	说明
latitude	纬度，范围为 -90~90，负数表示南纬
longitude	经度，范围为 -180~180，负数表示西经
…	…

• 更多内容点击跳转至官方文档：API-位置-wx.getLocation

---

总结

     更多细节请务必按照给的链接前去查阅官方文档进一步的学习，本文内容只给出了可以直接实现功能的代码，里面涉及的语法、标签等需要读者自己花点时间去理解，仅供参考噢~