微信小程序创建之获取地理位置并跳转腾讯地图

微信小程序创建之获取地理位置并跳转腾讯地图

1、服务器域名配置

登录微信公众平台小程序，首先配置服务器域名。

本实例的域名在腾讯云购买

点击修改可前往腾讯云购买，购买后会自动配置。

2、微信小程序开发

下载开发者工具

下载安装后为

扫一扫登录后，选择“本地小程序项目”，选择新建项目或打开已有项目

创建后会有如下几种文件，.js、.wxml、.wxss、.json文件

其中index.wxml为首页面

index.wxml代码如下：

  
    
    {{userInfo.nickName}}
  
  
    {{motto}}
  

index.js代码如下：

//获取应用实例

var app = getApp()
Page({
  data: {
    motto: '你好小程序',
    userInfo: {}
  },
  //事件处理函数
  bindViewTap: function() {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
  onLoad: function () {
    console.log('onLoad')
    var that = this
    //调用应用实例的方法获取全局数据
    app.getUserInfo(function(userInfo){
      //更新数据
      that.setData({
        userInfo:userInfo
      })
    })
  }
})

index.wxss代码如下：

.userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.userinfo-avatar {
  width: 128rpx;
  height: 128rpx;
  margin: 20rpx;
  border-radius: 50%;
}
.userinfo-nickname {
  color: #aaa;
}
.usermotto {
  margin-top: 200px;
}

点击头像跳转到地理位置界面

log.wxml代码如下：

  
    
      

        
            经度
            
            纬度
            
        
        
          获取地理位置
          查看地理位置(腾讯地图)
        
      
    
  

log.js代码如下：

var app = getApp()
Page({
  data: {
    //默认未获取地址
    hasLocation: false
  },
  //获取经纬度
  getLocation: function (e) {
    console.log(e)
    var that = this
    wx.getLocation({
      success: function (res) {
        console.log(res)
        that.setData({
          hasLocation: true,
          location: {
            longitude: res.longitude,
            latitude: res.latitude
          }
        })
      }
    })
  },
  //根据经纬度在地图上显示
  openLocation: function (e) {
    var value = e.detail.value
    wx.openLocation({
      longitude: Number(value.longitude),
      latitude: Number(value.latitude)
    })
  }
})

log.wxss代码如下：

.wrapper{
  height: 100%;
  background:#fff;
}
.page-body-form-value{
  font-size: 14px;
  color:darkturquoise;
  font-weight: bold;
  padding-left: 15px;
  border: 1px solid rgb(0, 0, 0);
  border-radius: 4px;
  height: 30px;
  line-height: 30px;
}
.page-body-form-key{
  font-size:14px;
  padding: 10px;
  margin-top:15px;
  font-family: "Microsoft Yahei";
  font-weight: bold;
  height: 30px;
  line-height: 30px;
}
.page-body-button{
  margin-top:20px;
  line-height: 2;
  background-color: #ffffff;
}

log.json代码如下：

{
    "navigationBarTitleText": "地理位置"
}

点击“获取地理位置”界面，显示经纬度

点击“查看地理位置”跳转腾讯地图界面

3、小程序发布

点击“上传”至体验版