在微信小程序地图上选择位置

实现效果

许多小程序都有以下要求：

小程序打开后，用户的位置将以文本形式显示。如果用户不确定，他可以打开地图，在地图上选择自己的位置。选择完成后，显示的用户位置将会改变。

单击地址选择位置。

选择位置后

源码实现

以下不仅是源代码，也希望通过源代码尽可能多的讲解小程序的知识。

视图 index.wxml

index.wxml:

view class=' address ' bind tap=' onchange address ' { address } }/view view组件可用作父容器或显示一段文本，text组件也可用于显示文本。区别在于无法选择视图中的文本。

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

将值赋给index.js中没有变量的addresss，然后可以在index.wxml中自动更新，类似于angular，但在applet中是单绑定。

轻击是一个触摸事件。小程序使用bind或catch来绑定事件。其属性值是一个函数名。这个函数是在index.js中定义的，当用户触摸这个视图时，会执行相应的函数。

逻辑层 index.js

//报价腾讯地图API var QQMAPWX=require('././LIBS/QQ map-WX-JSSDK . js’)；var qqmapsdkpage({ /** * page的初始数据*/data3360 {address: ' '，SRC:''}，/* *生命周期函数-听页加载*/onload3360函数(选项){/*判断是第一次从位置页加载还是返回。如果它从位置页返回，它将被传递。=null options.address！=' '){//设置地址变量的值。setdata ({address:options。地址})；} else {//实例化API核心类qqmapsdk=new QQMapWX({ //此密钥需要用户申请密钥3360 ' MnXBZ-G5TWD-Gyf42-HHZJL-2w2j 3-PVBx4 ' })；变量=这个；//调用PSDK的接口QQMA。反向地理编码器({Succe:函数(RES){ that . setdata({ address 3360 RES . result . address })；}，fail:函数(RES){//console . log(RES)；}，complete : function(RES){//console . log(RES)；} });} } index . js中的所有代码都应该放在page函数中。

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

如果另一页跳转并且参数通过问号传递，您可以使用选项。获取相应值的参数名称。

p>qqmapsdk.reverseGeocoder

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

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

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

在地图中选择位置

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

onChangeAddress: function (e) {    wx.navigateTo({      url: "/pages/position/position"    });  }

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

position.wxml:

<view class="page-body">  <view class="page-section page-section-gap">    <map id="qqMap" style="width: 100%; height: 300px;" latitude="{{latitude}}" longitude="{{longitude}}" show-location></map>  </view></view>

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

下面是 position.js 完整代码

var QQMapWX = require('../../libs/qqmap-wx-jssdk.js');var qqmapsdk;Page({  data: {    latitude: 0,//地图初次加载时的纬度坐标    longitude: 0, //地图初次加载时的经度坐标    name:"" //选择的位置名称  },  onLoad: function () {    // 实例化API核心类    qqmapsdk = new QQMapWX({      key: 'MNXBZ-G5TWD-GYF42-HHZJL-2W2J3-PVBX4'    });       this.moveToLocation();     },  //移动选点  moveToLocation: function () {    var that = this;    wx.chooseLocation({      success: function (res) {            console.log(res.name);            //选择地点之后返回到原来页面        wx.navigateTo({          url: "/pages/index/index?address="+res.name        });      },      fail: function (err) {        console.log(err)      }    });  }});

wx.chooseLocation 方法，会打开地图，并且默认以用户当前位置为中心点。并且会在下面展示周围一些地点列表，供用户选择，用户选择完地点后，点击 完成，会触发 其 success 参数指定的函数，可以通过参数 res获取地点名称、经纬度等相关信息

在这里，获取当相关信息后跳转到主页，同时将用户选择的位置名称传递过去

在 index.wxml 中，有一段代码用来处理：如果用户在点击 完成 前没有选择任何位置，则继续显示当前位置，否则显示用户选择的位置。

/*判断是第一次加载还是从position页面返回    如果从position页面返回，会传递用户选择的地点*/    if (options.address != null && options.address != '') {      //设置变量 address 的值      this.setData({        address: options.address      });    } else {....}