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

àì夳堔傛蜴生んèń 2022-05-25 11:38 427阅读 0赞

> 需求分析： 一些小程序打开后，以文字形式显示用户所在位置，如果用户觉得不准，可以打开地图，在地图上自己选择位置，选择完成后，显示的用户的位置会发生变化.今天我们就来看一下如何实现这个功能

**具体实现**

// index.wxml
    // 显示位置信息（默认显示自动定位后的位置信息）
    <view class='address' bindtap='onChangeAddress'>
      {
       {address}}
    </view>
    // 点击这块可以改变位置（改为自己确定后的地址）

// index.js var QQMapWX = require('../../libs/qqmap-wx-jssdk.js'); // 首先引入腾讯地图的API var qqmapsdk; Page({ /** * 页面的初始数据 */ data: { address: "", // 地址信息 src:"" , m_latitude: null, m_longitude: null }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { /* 判断是第一次加载还是从position页面返回 如果从position页面返回，会传递用户选择的地点 如果不是从position页面返回，而是第一次进入，则会自动定位用户的位置，显示用户的位置 */ if (options.address != null && options.address != '') { //设置变量 address 的值 this.setData({ address: options.address }); } else { // 实例化API核心类 qqmapsdk = new QQMapWX({ //此key需要自己申请 key: 'MNXBZ-G5TWD-GY...' }); var that = this; // 调用接口 qqmapsdk.reverseGeocoder({ // 这里没有写location选项，是因为默认就是当前位置 success: function (res) { // 获取默认下的地址 that.setData({ address: res.result.address }); }, fail: function (res) { //console.log(res); }, complete: function (res) { //console.log(res); } }); }, // 点击跳转至 onChangeAddress: function (e) { wx.navigateTo({ url: "/pages/position/position" }); } }

// 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>

// 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) { // res.name为地址名称 console.log(res.name); //选择地点之后返回到原来页面 wx.navigateTo({ url: "/pages/index/index?address="+res.name }); }, fail: function (err) { console.log(err) } }); } });

> 切记要判断用户是否给与了位置信息的权限，提示用户给与权限哦

[腾讯地图api][api]

您可能感兴趣的：

*  [Fundebug上线微信小游戏错误监控！支持自动截屏！][Fundebug]
 *  [Fundebug: 小程序的运维中心][Fundebug_]

原文链接：https://segmentfault.com/a/1190000014833073?utm\_source=index-hottest

[api]: http://lbs.qq.com/qqmap_wx_jssdk/method-reverseGeocoder.html
[Fundebug]: https://blog.fundebug.com/2018/05/04/fundebug-support-wechat-game/
[Fundebug_]: https://blog.csdn.net/qq_40126542/article/details/80112657