用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

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

    [LV.5]常住居民I

    898

    主题

    2087

    帖子

    3万

    金钱

    管理员

    论坛管理员

    Rank: 9Rank: 9Rank: 9

    积分
    0

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

    QQ
    2018-1-15 18:22:21 zhichi_admin 管理员 楼主 02216
    微信小程序创建之获取地理位置并跳转腾讯地图

    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代码如下:
    • <view class="container">  
    •   <view  bindtap="bindViewTap" class="userinfo">  
    •     <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>  
    •     <text class="userinfo-nickname">{{userInfo.nickName}}</text>  
    •   </view>  
    •   <view class="usermotto">  
    •     <text class="user-motto">{{motto}}</text>  
    •   </view>  
    • </view>  


    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代码如下:
    • <view class="wrapper">  
    •   <view class="page-body">  
    •     <view class="page-body-wrapper">  
    •       <form bindsubmit="openLocation">  
    •         <view class="page-body-form">  
    •             <text class="page-body-form-key">经度</text>  
    •             <input class="page-body-form-value" type="text" value="{{location.longitude}}" name="longitude"></input>  
    •             <text class="page-body-form-key">纬度</text>  
    •             <input class="page-body-form-value" type="text"  value="{{location.latitude}}" name="latitude"></input>  
    •         </view>  
    •         <view class="page-body-buttons">  
    •           <button class="page-body-button" type="default" bindtap="getLocation">获取地理位置</button>  
    •           <button class="page-body-button" type="default" formType="submit">查看地理位置(腾讯地图)</button>  
    •         </view>  
    •       </form>  
    •     </view>  
    •   </view>  
    • </view>  



    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

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

    还可领取小程序推广攻略