通过下面一个实例学习地图API的调用，具体结合微信小程序地图API进行学习源码下载链接下载源码，添加到自己的小程序文件夹。查看大概效果如下：

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

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

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

其中：

全局：

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

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

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

单页面：

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

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

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

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

index.js脚本文件：

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

接下来是wxml界面布局[plain]viewplaincopyviewclass="wrapper"viewclass="page-body"viewclass="page-body-wrapper"formbindsubmit="openLocation"viewclass="page-body-form"textclass="page-body-form-key"经度/textinputclass="page-body-form-value"type="text"value="{{location.longitude}}"name="longitude"/textclass="page-body-form-key"维度/textinputclass="page-body-form-value"type="text"value="{{location.latitude}}"name="latitude"//viewviewclass="page-body-buttons"buttonclass="page-body-button"type="primary"bindtap="getLocation"获取位置/buttonbuttonclass="page-body-button"type="primary"formType="submit"查看位置/buttonbuttonclass="page-body-button"type="primary"bindtap="chooseLocation"选择位置/button/view/form/view/view/view解析：这里用到了view/view标签text文字/text和button...按键名/butoon标签index.wxss文件：[plain]viewplaincopy/**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:1pxsolidrgb(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:"MicrosoftYahei";font-weight:bold;height:30px;line-height:30px;}.page-body-button{margin-top:20px;line-height:2;}在index.wxml中,我们给表单中的经度和纬度输入框双向绑定经纬度的指,并给第一个按钮绑定了获取经纬度值的事件,当点击获取位置的按钮,就可以通过微信提供的接口获取我们想要的值,同时,我们也可以自己输入经纬度进行查询位置.手机预览：（需要在新建项目的时候就输入AppID，不然不能预览）

1.转载：https://blog.csdn.net/qq_24397253/article/details/68488398