用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索
  • TA的每日心情
    无聊
    2017-8-15 16:38
  • 签到天数: 42 天

    [LV.5]常住居民I

    911

    主题

    2100

    帖子

    3万

    金钱

    管理员

    论坛管理员

    Rank: 9Rank: 9Rank: 9

    积分
    0

    突出贡献优秀版主荣誉管理论坛元老

    QQ
    2018-1-15 18:22:21 zhichi_admin 管理员 楼主 02620
    微信小程序创建之获取地理位置并跳转腾讯地图
    1、服务器域名配置 登录微信公众平台小程序,首先配置服务器域名。 Center.jpg 本实例的域名在腾讯云购买 Center.jpg 点击修改可前往腾讯云购买,购买后会自动配置。 Center.jpg 2、微信小程序开发 下载开发者工具 Center.jpg 下载安装后为 Center.jpg
    Center.jpg
    扫一扫登录后,选择“本地小程序项目”,选择新建项目或打开已有项目
    Center.jpg
    创建后会有如下几种文件,.js、.wxml、.wxss、.json文件
    Center.jpg
    其中index.wxml为首页面 Center.jpg 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;
    • }
    点击头像跳转到地理位置界面 Center.jpg 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": "地理位置"
    • }
    点击“获取地理位置”界面,显示经纬度
    Center.jpg
    点击“查看地理位置”跳转腾讯地图界面
    Center.jpg
    使用道具 举报 回复
    发新帖
    您需要登录后才可以回帖 登录 | 立即注册
    咫尺论坛|小程序开发社区
    X

    扫码添加专属客服即可随时咨询

    还可领取小程序推广攻略