微信小程序map组件地图定位当前位置

小程序map组件的应用方式：简单版

wxml:

wxss:

page{ width: 100%; height:100%; }
#map{ width: 100%; height:100%; }

js:

data: {
    markers: [],  //地图参数：
    latitude: "", //纬度 
    longitude: "",  //经度
  },
  regionchange(e) {
    //console.log(e)
  },
  markertap(e) {
    //console.log(e)
  },
  controltap(e) {
    //console.log(e)
  },

  //获得地图
  getMyMap(e) {
    let that = this;
    //自行查询经纬度 http://www.gpsspg.com/maps.htm
    const mapLatitude = 23.1194300000,
          mapLongitude = 113.3212200000;
    wx.getLocation({
      type: 'wgs84', 
      success(res){
      // 当前自己的经纬度 res.latitude，res.longitude
        that.setData({
          latitude: mapLatitude,
          longitude: mapLongitude,
          markers: [{
            id: "0",
            latitude: mapLatitude,
            longitude: mapLongitude,
            iconPath: "https://xcx.quan5fen.com/Public/xcx-hitui/image/imgs-jyh/map-ico.png",
            width: 40,
            height: 40,
            callout: {
              'display': 'ALWAYS', 'fontSize': '30rpx', 'content': '广州珠江新城',
              'padding': '8rpx', 'boxShadow': '0 0 5rpx #333','borderRadius':'4rpx'
            }
          }],
        })
      }
    })
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.getMyMap()
  },

源代码可访问本人github: https://github.com/xiexikang/xcx-map

复杂版：微信小程序map组件路线规划，腾讯地图sdk的应用案例