编写一个微信小程序帮助显示当前实时地理位置。

开发平台：微信开发者工具

获取经纬度的代码字段:

1. 在app.json页面添加permission字段
   

2. 创建location页面
   

真机调试效果（scale为20）：

可见此时精度已经到了可以显示街边店铺。

可以通过修改scale的大小来改变显示的精度

完整代码：

app.json

{
  "pages": [
    "pages/location/location"   //根据自己的需求添加其他页面
  ],
  "window": {
    "backgroundColor": "#F6F6F6",
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#F6F6F6",
    "navigationBarTitleText": "实时地图显示",
    "navigationBarTextStyle": "black"
  },
  "tabBar": {               //根据个人需求添加其他的tabBar
    "selectedColor": "#d81e06",
    "backgroungColor": "#ffffff",
    "borderStyle": "white",
    "list": [
      {
        "pagePath": "pages/location/location",
        "iconPath": "images/tab/locate.png",
        "selectedIconPath": "images/tab/locateHL.png",
        "text": "定位"
      }
    ]
  },
  "permission": {
    "scope.userLocation": {
      "desc": "你的位置信息将用于小程序位置接口的效果展示"
    }
  },
  "sitemapLocation": "sitemap33.json"
}

location.js

var app = getApp()
Page({
  onLoad: function () {
    console.log('地图定位！')
    var that = this
    wx.getLocation({
        type: 'gcj02', //返回可以用于wx.openLocation的经纬度
        success: function (res) {
            var latitude = res.latitude; 
            var longitude = res.longitude; 
            wx.openLocation({
              latitude:latitude,
              longitude:longitude,
              scale:20
            })
        }
    });
  }
})

location.json

{
    "navigationBarTitleText": "当前地图位置"
}

location.wxml

<view class="container" id="map">
</view>

location.wxss

#map {
  padding: 40rpx;
}