微信小程序入门实例--地图

转载

Q神 2022-12-16 13:40:41 博主文章分类：小程序

文章标签 git API xml 文章分类 OpenStack 云计算

通过下面一个实例学习地图API的调用，具体结合微信小程序地图API进行学习

源码下载链接下载源码，添加到自己的小程序文件夹。查看大概效果如下：

微信小程序入门实例--地图_xml

微信小程序入门实例--地图_git_02

建议删除模板自己敲一遍代码，好记性不如敲烂键盘

微信小程序入门实例--地图_git_03

微信小程序入门实例--地图_API_04

我们通过这个实例，来认识下小程序的大概架构。请在自己的工具自行打开每个文件。

.js后缀的是脚本文件，.json后缀的文件是配置文件，.wxss后缀的是样式表文件

其中：

全局：

app.js是小程序的脚本代码。我们可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量。调用框架提供的丰富的 API，如本例的同步存储及同步读取本地数据。

app.json 是对整个小程序的全局配置。我们可以在这个文件中配置小程序是由哪些页面组成，配置小程序的窗口背景色，配置导航条样式，配置默认标题。注意该文件不可添加任何注释。

app.wxss 是整个小程序的公共样式表。我们可以在页面组件的 class 属性上直接使用 app.wxss 中声明的样式规则。

单页面：

如图：除了app开头的其他项均为子页面信息。页面文件夹里分别各自存放该页面的内容(包括布局页面.wxml,样式文件.wxss,配置文件json文件)。其中pages 中的第一个页面是小程序的首页。

那么你应该会问：如何自己创建页面呢？

通过目录右边的。。。可以添加属于自己的页面哦！并添加自己需要的配置文件。又学到了一招是不是很开心。

微信小程序入门实例--地图_git_05

接下来：看代码啦拉拉。。。微信API调用WIKI觉得看开发者文档是最好的学习方法，虽然有些讲的不太细致，对初学者。。。一面懵逼。。。结合实例和wiki。是不错的学习方法。

index.js脚本文件：

//index.js  
//获取应用实例  
var app = getApp()  
Page({  
  data: {  
    motto: 'Hello World111',  
    userInfo: {},  
    //默认未获取地址  
    hasLocation:false  
  },  
  //事件处理函数  
  bindViewTap: function() {  
    wx.navigateTo({  
      url: '../logs/logs'  
    })  
  },  
  onLoad: function () {  
    console.log('onLoad')  
    var that = this  
    //调用应用实例的方法获取全局数据  
    app.getUserInfo(function(userInfo){  
      //更新数据  
      that.setData({  
        userInfo:userInfo  
      })  
    })  
  },  
  //获取经纬度  
  getLocation:function(e){  
    console.log(e)  
    var that=this  
    wx.getLocation({  
      success: function(res){  
        // success  
        console.log(res)  
        that.setData({  
          hasLocation:true,  
          location:{  
            longitude: res.longitude,  
            latitude:res.latitude  
          }  
        })  
      }  
    })  
  },  
  //根据经纬度在地图上显示  
  openLocation:function(e){  
    console.log("openLocation"+e)  
    var value=e.detail.value  
    wx.openLocation({  
      longitude: Number(value.longitude),  
      latitude: Number(value.latitude)  
    })  
  },  
  //选择位置位置  
  chooseLocation:function(e){  
    console.log(e)  
    var that=this  
    wx.chooseLocation({  
          success: function(res){  
            // success  
            console.log(res)  
            that.setData({  
              hasLocation:true,  
              location:{  
                longitude:res.longitude,  
                latitude:res.latitude  
              }  
            })  
          },  
          fail: function() {  
            // fail  
          },  
          complete: function() {  
            // complete  
          }  
        })  
  }  
})

接下来是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" />  
          <text class="page-body-form-key">维度</text>  
          <input class="page-body-form-value" type="text" value="{{location.latitude}}" name="latitude" />  
        </view>  
        <view class="page-body-buttons">  
          <button class="page-body-button" type="primary" bindtap="getLocation">获取位置</button>  
          <button class="page-body-button" type="primary" formType="submit">查看位置</button>  
          <button class="page-body-button" type="primary" bindtap="chooseLocation">选择位置</button>  
        </view>  
      </form>  
    </view>  
  </view>  
</view>

解析：这里用到了 <view></view>标签 <text>文字</text> 和 <button ...>按键名</butoon>标签

index.wxss文件：

/**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: 20px;  
}  
  
  
.wrapper{  
  height: 100%;  
  background:#fff;  
}  
.page-body-form-value{  
  font-size: 14px;  
  color:darkturquoise;  
  font-weight: bold;  
  padding-left: 15px;  
  border: 1px solid rgb(72, 165, 131);  
  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;  
}