530 lines
15 KiB
JavaScript
530 lines
15 KiB
JavaScript
var QQMapWX = require('../../utils/qqmap-wx-jssdk.min.js');
|
||
var qqmapsdk;
|
||
Page({
|
||
data: {
|
||
addListShow: false,
|
||
chooseCity: false,
|
||
regionShow: {
|
||
province: false,
|
||
city: false,
|
||
district: true
|
||
},
|
||
regionData: {},
|
||
currentRegion: {
|
||
province: '选择城市',
|
||
city: '选择城市',
|
||
district: '选择城市',
|
||
},
|
||
currentProvince: '选择城市',
|
||
currentCity: '选择城市',
|
||
currentDistrict: '选择城市',
|
||
latitude: '',
|
||
longitude: '',
|
||
centerData: {},
|
||
nearList: [],
|
||
suggestion: [],
|
||
selectedId: 0,
|
||
defaultKeyword: '房产小区',
|
||
keyword: ''
|
||
},
|
||
onLoad: function () {
|
||
let self =this;
|
||
self.mapCtx = wx.createMapContext('myMap')
|
||
// 实例化API核心类
|
||
qqmapsdk = new QQMapWX({
|
||
key: 'RQJBZ-6ZOCX-3QI4R-Z3JUH-GFDOS-YYBJ4'
|
||
});
|
||
wx.showLoading({
|
||
title: '加载中'
|
||
});
|
||
//定位
|
||
wx.getLocation({
|
||
type: 'wgs84',
|
||
success(res) {
|
||
console.log(res)
|
||
const latitude = res.latitude
|
||
const longitude = res.longitude
|
||
const speed = res.speed
|
||
const accuracy = res.accuracy
|
||
//你地址解析
|
||
qqmapsdk.reverseGeocoder({
|
||
location: {
|
||
latitude: latitude,
|
||
longitude: longitude
|
||
},
|
||
success: function (res) {
|
||
//console.log(res)
|
||
self.setData({
|
||
latitude: latitude,
|
||
longitude: longitude,
|
||
currentRegion: res.result.address_component,
|
||
keyword: self.data.defaultKeyword
|
||
})
|
||
// 调用接口
|
||
self.nearby_search();
|
||
},
|
||
});
|
||
},
|
||
fail(err) {
|
||
//console.log(err)
|
||
wx.hideLoading({});
|
||
wx.showToast({
|
||
title: '定位失败',
|
||
icon: 'none',
|
||
duration: 1500
|
||
})
|
||
setTimeout(function () {
|
||
wx.navigateBack({
|
||
delta: 1
|
||
})
|
||
}, 1500)
|
||
}
|
||
})
|
||
},
|
||
onReady: function () {
|
||
|
||
},
|
||
//监听拖动地图，拖动结束根据中心点更新页面
|
||
mapChange: function (e) {
|
||
let self = this;
|
||
if (e.type == 'end' && (e.causedBy == 'scale' || e.causedBy == 'drag')){
|
||
self.mapCtx.getCenterLocation({
|
||
success: function (res) {
|
||
//console.log(res)
|
||
self.setData({
|
||
nearList:[],
|
||
latitude: res.latitude,
|
||
longitude: res.longitude,
|
||
})
|
||
self.nearby_search();
|
||
}
|
||
})
|
||
}
|
||
|
||
},
|
||
//重新定位
|
||
reload: function () {
|
||
this.onLoad();
|
||
},
|
||
//整理目前选择省市区的省市区列表
|
||
getRegionData: function () {
|
||
let self = this;
|
||
//调用获取城市列表接口
|
||
qqmapsdk.getCityList({
|
||
success: function (res) {//成功后的回调
|
||
//console.log(res)
|
||
let provinceArr = res.result[0];
|
||
let cityArr = [];
|
||
let districtArr = [];
|
||
for (var i = 0; i < provinceArr.length; i++) {
|
||
var name = provinceArr[i].fullname;
|
||
if (self.data.currentRegion.province == name) {
|
||
if (name == '北京市' || name == '天津市' || name == '上海市' || name == '重庆市') {
|
||
cityArr.push(provinceArr[i])
|
||
} else {
|
||
qqmapsdk.getDistrictByCityId({
|
||
// 传入对应省份ID获得城市数据，传入城市ID获得区县数据,依次类推
|
||
id: provinceArr[i].id,
|
||
success: function (res) {//成功后的回调
|
||
//console.log(res);
|
||
cityArr = res.result[0];
|
||
self.setData({
|
||
regionData: {
|
||
province: provinceArr,
|
||
city: cityArr,
|
||
district: districtArr
|
||
}
|
||
})
|
||
},
|
||
fail: function (error) {
|
||
//console.error(error);
|
||
},
|
||
complete: function (res) {
|
||
//console.log(res);
|
||
}
|
||
});
|
||
}
|
||
}
|
||
}
|
||
for (var i = 0; i < res.result[1].length; i++) {
|
||
var name = res.result[1][i].fullname;
|
||
if (self.data.currentRegion.city == name) {
|
||
qqmapsdk.getDistrictByCityId({
|
||
// 传入对应省份ID获得城市数据，传入城市ID获得区县数据,依次类推
|
||
id: res.result[1][i].id,
|
||
success: function (res) {//成功后的回调
|
||
//console.log(res);
|
||
districtArr = res.result[0];
|
||
self.setData({
|
||
regionData: {
|
||
province: provinceArr,
|
||
city: cityArr,
|
||
district: districtArr
|
||
}
|
||
})
|
||
},
|
||
fail: function (error) {
|
||
//console.error(error);
|
||
},
|
||
complete: function (res) {
|
||
//console.log(res);
|
||
}
|
||
});
|
||
}
|
||
}
|
||
},
|
||
fail: function (error) {
|
||
//console.error(error);
|
||
},
|
||
complete: function (res) {
|
||
//console.log(res);
|
||
}
|
||
});
|
||
},
|
||
onShow: function () {
|
||
let self = this;
|
||
},
|
||
//地图标记点
|
||
addMarker: function (data) {
|
||
//console.log(data)
|
||
//console.log(data.title)
|
||
var mks = [];
|
||
mks.push({ // 获取返回结果，放到mks数组中
|
||
title: data.title,
|
||
id: data.id,
|
||
addr: data.addr,
|
||
province: data.province,
|
||
city: data.city,
|
||
district: data.district,
|
||
latitude: data.latitude,
|
||
longitude: data.longitude,
|
||
iconPath: "../../assets/my_marker.png", //图标路径
|
||
width: 25,
|
||
height: 25
|
||
})
|
||
this.setData({ //设置markers属性，将搜索结果显示在地图中
|
||
markers: mks,
|
||
currentRegion: {
|
||
province: data.province,
|
||
city: data.city,
|
||
district: data.district,
|
||
}
|
||
})
|
||
wx.hideLoading({});
|
||
},
|
||
//点击选择搜索结果
|
||
backfill: function (e) {
|
||
var id = e.currentTarget.id;
|
||
let name = e.currentTarget.dataset.name;
|
||
for (var i = 0; i < this.data.suggestion.length; i++) {
|
||
if (i == id) {
|
||
//console.log(this.data.suggestion[i])
|
||
this.setData({
|
||
centerData: this.data.suggestion[i],
|
||
addListShow: false,
|
||
latitude: this.data.suggestion[i].latitude,
|
||
longitude: this.data.suggestion[i].longitude
|
||
});
|
||
this.nearby_search();
|
||
return;
|
||
//console.log(this.data.centerData)
|
||
}
|
||
}
|
||
},
|
||
//点击选择地图下方列表某项
|
||
chooseCenter: function (e) {
|
||
var id = e.currentTarget.id;
|
||
let name = e.currentTarget.dataset.name;
|
||
for (var i = 0; i < this.data.nearList.length; i++) {
|
||
if (i == id) {
|
||
this.setData({
|
||
selectedId: id,
|
||
centerData: this.data.nearList[i],
|
||
latitude: this.data.nearList[i].latitude,
|
||
longitude: this.data.nearList[i].longitude,
|
||
});
|
||
this.addMarker(this.data.nearList[id]);
|
||
return;
|
||
//console.log(this.data.centerData)
|
||
}
|
||
}
|
||
},
|
||
//显示搜索列表
|
||
showAddList: function () {
|
||
this.setData({
|
||
addListShow: true
|
||
})
|
||
},
|
||
// 根据关键词搜索附近位置
|
||
nearby_search: function () {
|
||
var self = this;
|
||
wx.hideLoading();
|
||
wx.showLoading({
|
||
title: '加载中'
|
||
});
|
||
// 调用接口
|
||
qqmapsdk.search({
|
||
keyword: self.data.keyword, //搜索关键词
|
||
//boundary: 'nearby(' + self.data.latitude + ', ' + self.data.longitude + ', 1000, 16)',
|
||
location: self.data.latitude + ',' + self.data.longitude,
|
||
page_size: 20,
|
||
page_index: 1,
|
||
success: function (res) { //搜索成功后的回调
|
||
//console.log(res.data)
|
||
var sug = [];
|
||
for (var i = 0; i < res.data.length; i++) {
|
||
sug.push({ // 获取返回结果，放到sug数组中
|
||
title: res.data[i].title,
|
||
id: res.data[i].id,
|
||
addr: res.data[i].address,
|
||
province: res.data[i].ad_info.province,
|
||
city: res.data[i].ad_info.city,
|
||
district: res.data[i].ad_info.district,
|
||
latitude: res.data[i].location.lat,
|
||
longitude: res.data[i].location.lng
|
||
});
|
||
}
|
||
self.setData({
|
||
selectedId: 0,
|
||
centerData: sug[0],
|
||
nearList: sug,
|
||
suggestion: sug
|
||
})
|
||
self.addMarker(sug[0]);
|
||
},
|
||
fail: function (res) {
|
||
//console.log(res);
|
||
},
|
||
complete: function (res) {
|
||
//console.log(res);
|
||
}
|
||
});
|
||
},
|
||
//根据关键词搜索匹配位置
|
||
getsuggest: function (e) {
|
||
var _this = this;
|
||
var keyword = e.detail.value;
|
||
_this.setData({
|
||
addListShow: true
|
||
})
|
||
//调用关键词提示接口
|
||
qqmapsdk.getSuggestion({
|
||
//获取输入框值并设置keyword参数
|
||
keyword: keyword, //用户输入的关键词，可设置固定值,如keyword:'KFC'
|
||
location: _this.data.latitude + ',' + _this.data.longitude,
|
||
page_size: 20,
|
||
page_index: 1,
|
||
//region:'北京', //设置城市名，限制关键词所示的地域范围，非必填参数
|
||
success: function (res) {//搜索成功后的回调
|
||
//console.log(res);
|
||
var sug = [];
|
||
for (var i = 0; i < res.data.length; i++) {
|
||
sug.push({ // 获取返回结果，放到sug数组中
|
||
title: res.data[i].title,
|
||
id: res.data[i].id,
|
||
addr: res.data[i].address,
|
||
province: res.data[i].province,
|
||
city: res.data[i].city,
|
||
district: res.data[i].district,
|
||
latitude: res.data[i].location.lat,
|
||
longitude: res.data[i].location.lng
|
||
});
|
||
}
|
||
_this.setData({ //设置suggestion属性，将关键词搜索结果以列表形式展示
|
||
suggestion: sug,
|
||
nearList: sug,
|
||
keyword: keyword
|
||
});
|
||
},
|
||
fail: function (error) {
|
||
//console.error(error);
|
||
},
|
||
complete: function (res) {
|
||
//console.log(res);
|
||
}
|
||
});
|
||
},
|
||
//打开选择省市区页面
|
||
chooseCity: function () {
|
||
let self = this;
|
||
self.getRegionData();
|
||
self.setData({
|
||
chooseCity: true,
|
||
regionShow: {
|
||
province: false,
|
||
city: false,
|
||
district: true
|
||
},
|
||
currentProvince: self.data.currentRegion.province,
|
||
currentCity: self.data.currentRegion.city,
|
||
currentDistrict: self.data.currentRegion.district,
|
||
})
|
||
},
|
||
//选择省
|
||
showProvince: function () {
|
||
this.setData({
|
||
regionShow: {
|
||
province: true,
|
||
city: false,
|
||
district: false
|
||
}
|
||
})
|
||
},
|
||
//选择城市
|
||
showCity: function () {
|
||
this.setData({
|
||
regionShow: {
|
||
province: false,
|
||
city: true,
|
||
district: false
|
||
}
|
||
})
|
||
},
|
||
//选择地区
|
||
showDistrict: function () {
|
||
this.setData({
|
||
regionShow: {
|
||
province: false,
|
||
city: false,
|
||
district: true
|
||
}
|
||
})
|
||
},
|
||
//选择省之后操作
|
||
selectProvince: function (e) {
|
||
//console.log(e)
|
||
let self = this;
|
||
let id = e.currentTarget.dataset.id;
|
||
let name = e.currentTarget.dataset.name;
|
||
self.setData({
|
||
currentProvince: name,
|
||
currentCity: '请选择城市',
|
||
})
|
||
if (name == '北京市' || name == '天津市' || name == '上海市' || name == '重庆市'){
|
||
var provinceArr = self.data.regionData.province;
|
||
var cityArr = [];
|
||
for (var i = 0; i < provinceArr.length;i++){
|
||
if(provinceArr[i].fullname == name){
|
||
cityArr.push(provinceArr[i])
|
||
self.setData({
|
||
regionData: {
|
||
province: self.data.regionData.province,
|
||
city: cityArr,
|
||
district: self.data.regionData.district
|
||
}
|
||
})
|
||
self.showCity();
|
||
return;
|
||
}
|
||
}
|
||
}else{
|
||
let bj = self.data.regionShow;
|
||
self.getById(id, name, bj)
|
||
}
|
||
},
|
||
//选择城市之后操作
|
||
selectCity: function (e) {
|
||
let self = this;
|
||
let id = e.currentTarget.dataset.id;
|
||
let name = e.currentTarget.dataset.name;
|
||
self.setData({
|
||
currentCity: name,
|
||
currentDistrict: '请选择城市',
|
||
})
|
||
let bj = self.data.regionShow;
|
||
self.getById(id, name, bj)
|
||
},
|
||
//选择区县之后操作
|
||
selectDistrict: function (e) {
|
||
let self = this;
|
||
let id = e.currentTarget.dataset.id;
|
||
let name = e.currentTarget.dataset.name;
|
||
let latitude = e.currentTarget.dataset.latitude;
|
||
let longitude = e.currentTarget.dataset.longitude;
|
||
self.setData({
|
||
currentDistrict: name,
|
||
latitude: latitude,
|
||
longitude: longitude,
|
||
currentRegion: {
|
||
province: self.data.currentProvince,
|
||
city: self.data.currentCity,
|
||
district: name
|
||
},
|
||
chooseCity: false,
|
||
keyword: self.data.defaultKeyword
|
||
})
|
||
self.nearby_search();
|
||
},
|
||
//根据选择省市加载市区列表
|
||
getById: function (id,name,bj) {
|
||
let self = this;
|
||
qqmapsdk.getDistrictByCityId({
|
||
// 传入对应省份ID获得城市数据，传入城市ID获得区县数据,依次类推
|
||
id: id, //对应接口getCityList返回数据的Id，如：北京是'110000'
|
||
success: function (res) {//成功后的回调
|
||
//console.log(res);
|
||
if(bj.province){
|
||
self.setData({
|
||
regionData: {
|
||
province: self.data.regionData.province,
|
||
city: res.result[0],
|
||
district: self.data.regionData.district
|
||
}
|
||
})
|
||
self.showCity();
|
||
} else if (bj.city) {
|
||
self.setData({
|
||
regionData: {
|
||
province: self.data.regionData.province,
|
||
city: self.data.regionData.city,
|
||
district: res.result[0]
|
||
}
|
||
})
|
||
self.showDistrict();
|
||
} else {
|
||
self.setData({
|
||
chooseCity: false,
|
||
})
|
||
}
|
||
},
|
||
fail: function (error) {
|
||
//console.error(error);
|
||
},
|
||
complete: function (res) {
|
||
//console.log(res);
|
||
}
|
||
});
|
||
},
|
||
//返回上一页或关闭搜索页面
|
||
back1: function () {
|
||
if (this.data.addListShow) {
|
||
this.setData({
|
||
addListShow: false
|
||
})
|
||
}else {
|
||
wx.navigateBack({
|
||
delta: 1
|
||
})
|
||
}
|
||
},
|
||
//关闭选择省市区页面
|
||
back2: function () {
|
||
this.setData({
|
||
chooseCity: false
|
||
})
|
||
},
|
||
//确认选择地址
|
||
selectedOk: function () {
|
||
let pages = getCurrentPages(); //获取当前页面js里面的pages里的所有信息。
|
||
let prevPage = pages[pages.length - 2];
|
||
console.log(this.data.centerData)
|
||
prevPage.setData({
|
||
storeAddress: this.data.centerData.title,
|
||
storeLatitude: this.data.centerData.latitude,
|
||
storeLongitude: this.data.centerData.longitude,
|
||
})
|
||
wx.navigateBack({
|
||
delta: 1
|
||
})
|
||
}
|
||
}) |