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
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
})
|