参考大牛的CSDN:https://blog.csdn.net/rolan1993/article/details/80278482
API链接:http://lbs.qq.com/qqmap_wx_jssdk/index.html(文档)
js下载: 微信小程序JavaScriptSDK v1.0(在上面的链接里下载)
key: ZYABZ-4WDCW-EGURD-RQUH2-IQWNV-WEFVF(自己在上面链接注册)
index页面
index.wxml代码
<!--index.wxml-->
<view class='address' bindtap='onChangeAddress'>
{{address}}
</view>
index.js代码
//引用腾讯地图API
var QQMapWX = require('../../qqmap-wx-jssdk.js');
var qqmapsdk;
Page({
/**
* 页面的初始数据
*/
data: {
address: "",
src: ""
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
/*判断是第一次加载还是从position页面返回
如果从position页面返回,会传递用户选择的地点*/
if (options.address != null && options.address != '') {
//设置变量 address 的值
this.setData({
address: options.address
});
} else {
// 实例化API核心类
qqmapsdk = new QQMapWX({
//此key需要用户自己申请
key: 'MNXBZ-G5TWD-GYF42-HHZJL-2W2J3-PVBX4'
});
var that = this;
// 调用接口
qqmapsdk.reverseGeocoder({
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页面
<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('../../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)
}
});
}
});