258资源分享网

很多小程序都有如下需求：

小程序打开后，以文字形式显示用户所在位置，如果用户觉得不准，可以打开地图，在地图上自己选择位置，选择完成后，显示的用户的位置会发生变化

点击地址选择地点

选择地点之后

下面不仅仅是源码，还希望通过源码尽量讲解小程序的相关知识

index.wxml:

view 组件可用作父容器，也可以用来展示一段文本，text组件也可以用来展示文本，区别在于view中的文本不能选中。

{{}} 是小程序中数据绑定的语法。在小程序中没有 dom 和 bom，所以不能根据id等属性获取控件，只能通过数据绑定的方式。

在index.js 中未变量 addresss 赋值，然后 index.wxml 中就可以自动更新，这与 angular 很像，但是，小程序中是单项绑定。

tap 是一个触摸事件，小程序中使用 bind 或者 catch 方式绑定事件，其属性值是一个函数名称，这个函数在 index.js 中定义，当用户触摸此 view 时就会执行对应的函数

index.js 中的所有代码都应该放在 page 函数中

其中 onLoad 函数是内置函数，大致相当于 js 中的 window.onload 函数。

如果是其他页面跳转过来，并且通过 问号的方式传递参数过来，可以使用 options.参数名称获取对应的值。

qqmapsdk.reverseGeocoder

这里用到了腾讯地图小程序客户端API，上面的函数就是API中的一个，作用是提供由坐标到坐标所在位置的文字描述的转换，输入坐标返回地理位置信息和附近poi列表。具体的使用方法参见官网，这里就不做赘述了，官网地址: 点击打开链接

调用成功之后获取地址并赋值给变量 address

这里要注意，必须通过 setData() 函数设置变量的数据，视图中才可以更新

如果用户觉得定位不准，可以点击 位置信息，打开地图页面，代码如下

wx.navigateTo 函数用于跳转到其他页面，可以在url 值后面以 ?参数名=参数值 的方式传递参数

position.wxml:

map 是小程序中的组件，用于显示地图信息，属性 latitude 和 longitude 用于设置地图的中心点

下面是 position.js 完整代码