需求分析: 一些小程序打开后,以文字形式显示用户所在位置,如果用户觉得不准,可以打开地图,在地图上自己选择位置,选择完成后,显示的用户的位置会发生变化.今天我们就来看一下如何实现这个功能
插件下载:https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/jsSdkOverview
具体实现
// 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)
}
});
}
});
切记要判断用户是否给与了位置信息的权限,提示用户给与权限哦
转自:https://segmentfault.com/a/1190000014833073