544 lines
15 KiB
JavaScript
544 lines
15 KiB
JavaScript
// pages/map.js
|
||
var QQMapWX = require('../../utils/qqmap-wx-jssdk.js');
|
||
var qqmapsdk = new QQMapWX({
|
||
key: 'QLPBZ-QODCX-7KB46-TQERC-T36BT-IIBJO' // 必填
|
||
});
|
||
Page({
|
||
|
||
/**
|
||
* 页面的初始数据
|
||
*/
|
||
data: {
|
||
isChecked:false,
|
||
inputVal:'',
|
||
latitude: 33.963864,
|
||
longitude: 118.277435,
|
||
suggestion:[],
|
||
district:{
|
||
latitude: 34.093003,
|
||
longitude: 118.756021,
|
||
},
|
||
distance: '',
|
||
distance: '',
|
||
scale: 11,
|
||
currMaker: {},
|
||
markers: [],
|
||
customCalloutMarkerIds: [1,2,3],
|
||
list:{name:'1111',},
|
||
mapShow:true,
|
||
tabList: [{
|
||
title: '总体情况',
|
||
num: 0
|
||
}, {
|
||
title: '特殊事件',
|
||
num: 1
|
||
}],
|
||
listNew: [{id:'01',title:'日本7.2级地震',content:'17：00：00日本发生7.2级地震，张家港桥跨中位移超限，其余桥梁无异',year:'2022年7月7日'},{id:'01',title:'日本7.2级地震',content:'17：00：00日本发生7.2级地震，张家港桥跨中位移超限，其余桥梁无异',year:'2022年7月7日'},{id:'01',title:'日本7.2级地震',content:'17：00：00日本发生7.2级地震，张家港桥跨中位移超限，其余桥梁无异',year:'2022年7月7日'},{id:'01',title:'日本7.2级地震',content:'17：00：00日本发生7.2级地震，张家港桥跨中位移超限，其余桥梁无异',year:'2022年7月7日'},{id:'01',title:'日本7.2级地震',content:'17：00：00日本发生7.2级地震，张家港桥跨中位移超限，其余桥梁无异',year:'2022年7月7日'},{id:'01',title:'日本7.2级地震',content:'17：00：00日本发生7.2级地震，张家港桥跨中位移超限，其余桥梁无异',year:'2022年7月7日'}], // 数据列表
|
||
page: 0, // page：当前页--
|
||
currentIndex: 0,
|
||
bridge:[],
|
||
bridgeItem:{
|
||
iconPath: './images/mapIcon.png',
|
||
width: 25,
|
||
height: 25,
|
||
bridgeName: '淮沭新河特大桥',
|
||
latitude: 34.079334,
|
||
longitude: 118.726242,
|
||
img:'./images/hsxhtdq.png',
|
||
id: "1",
|
||
callout: {
|
||
display: 'BYCLICK'
|
||
}
|
||
},
|
||
flag: true,
|
||
// 用户输入的关键词
|
||
searchValue:'',
|
||
// 滚动选择的索引
|
||
selectSchoolIndex:'',
|
||
school_name:'',
|
||
schoolValidate:'',
|
||
school_id:''
|
||
},
|
||
pagechange: function (e) {
|
||
console.log("e",e)
|
||
|
||
// 通过touch判断，改变tab的下标值
|
||
// if ("touch" === e.detail.source) {
|
||
// let currentPageIndex = this.data.currentIndex;
|
||
// currentPageIndex = (currentPageIndex + 1) % 2;
|
||
// // 拿到当前索引并动态改变
|
||
// this.setData({
|
||
// currentIndex: currentPageIndex,
|
||
// })
|
||
// }
|
||
},
|
||
//获取所有桥梁数据
|
||
getMainbridge: function () {
|
||
let that = this;
|
||
// 调用云函数
|
||
wx.cloud.callContainer({
|
||
config: {
|
||
env: 'prod-3g40nj3p9469214c',// 微信云托管的环境ID
|
||
},
|
||
path: '/api/v1/bridges',
|
||
method: 'GET',
|
||
header: {
|
||
'X-WX-SERVICE': 'bsisp-api',
|
||
'content-type': 'application/json',
|
||
'Authorization':'Bearer '+wx.getStorageSync('token')
|
||
},
|
||
|
||
success: function (res) {
|
||
console.log("res",res)
|
||
if(res.data.status="SUCCESS"){
|
||
var getBridgeContent = []
|
||
console.log("res.data.data",res.data.data)
|
||
for (let i = 0; i < res.data.data.length; i++) {
|
||
getBridgeContent.push({ // 获取返回结果，放到sug数组中
|
||
iconPath: './images/mapIcon.png',
|
||
width: 25,
|
||
height: 25,
|
||
callout: {
|
||
display: 'BYCLICK'
|
||
},
|
||
bridgeName: res.data.data[i].bridgeName,
|
||
id: Number(res.data.data[i].id),
|
||
img: res.data.data[i].fileId,
|
||
latitude: res.data.data[i].latitude,
|
||
longitude: res.data.data[i].longitude,
|
||
bridgeLength: res.data.data[i].bridgeLength,
|
||
bridgeType: res.data.data[i].bridgeType,
|
||
|
||
roadNo: res.data.data[i].roadNo,
|
||
stakeNo: res.data.data[i].stakeNo,
|
||
});
|
||
}
|
||
console.log("getBridgeContent",getBridgeContent)
|
||
|
||
that.getMyLocation(getBridgeContent)
|
||
that.setData({
|
||
bridge: getBridgeContent
|
||
})
|
||
console.log("that.data.bridge",that.data.bridge)
|
||
}
|
||
|
||
}
|
||
})
|
||
},
|
||
//获取单个桥数据 //wx.getStorageSync
|
||
getItembridge: function (e) { // 一定要传递参数e
|
||
console.log("e",e)
|
||
console.log("wx.getStorageSync('token')",wx.getStorageSync('token'))
|
||
// const that = this // 保存this对象
|
||
// 调用云函数
|
||
wx.cloud.callContainer({
|
||
config: {
|
||
env: 'prod-3g40nj3p9469214c',// 微信云托管的环境ID
|
||
},
|
||
path: '/api/v1/bridges',
|
||
method: 'get',
|
||
header: {
|
||
'X-WX-SERVICE': 'bsisp-api',
|
||
'content-type': 'application/json',
|
||
'Authorization':'Bearer '+wx.getStorageSync('token')
|
||
},
|
||
data: {
|
||
bridgeName: [e]// 从缓存中获取到phoneNumber字段
|
||
},
|
||
|
||
success: function (res) {
|
||
console.log("res",res)
|
||
|
||
}
|
||
})
|
||
},
|
||
showSchoolPicker()
|
||
{
|
||
console.log("1111")
|
||
let self = this;
|
||
self.showDatePicker()
|
||
},
|
||
hiddeDatePicker()
|
||
{
|
||
let self = this;
|
||
self.setData({
|
||
flag: !self.data.flag
|
||
})
|
||
},
|
||
showDatePicker()
|
||
{
|
||
let self = this;
|
||
self.setData({
|
||
flag: !self.data.flag
|
||
})
|
||
// self.getItems(self.bridge)
|
||
},
|
||
confirm(e)
|
||
{
|
||
console.log("self.e",e)
|
||
let self = this;
|
||
self.setData({
|
||
flag: !self.data.flag
|
||
})
|
||
// self.inputVal
|
||
// 获取选择
|
||
let item = self.data.bridge[self.data.selectSchoolIndex]?self.data.bridge[self.data.selectSchoolIndex]:self.data.bridge[0];
|
||
console.log("item",item)
|
||
// 通过发送自定义事件把用户选择的传递到父组件
|
||
self.setData({
|
||
// 选择
|
||
inputVal:item.bridgeName
|
||
})
|
||
self.bindmarkertap(e,item)
|
||
},
|
||
bindChangePicker(e)
|
||
{
|
||
console.log("e.detail.value[0]",e)
|
||
console.log("e.detail.value[0]",e.detail.value[0])
|
||
let self = this;
|
||
self.setData({
|
||
// 索引
|
||
selectSchoolIndex:e.detail.value[0]
|
||
})
|
||
},
|
||
//点击tab时触发
|
||
titleClick: function (e) {
|
||
console.log("e",e.currentTarget.dataset.idx)
|
||
this.setData({
|
||
//拿到当前索引并动态改变
|
||
currentIndex: e.currentTarget.dataset.idx
|
||
})
|
||
},
|
||
// 选择位置
|
||
handlePos(val){
|
||
console.log(val,'asdas');
|
||
var _this = this;
|
||
//调用关键词提示接口
|
||
qqmapsdk.getSuggestion({
|
||
//获取输入框值并设置keyword参数
|
||
keyword: val.detail.value, //用户输入的关键词，可设置固定值,如keyword:'KFC'
|
||
//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: Number(res.data[i].id),
|
||
addr: res.data[i].bridgeName,
|
||
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
|
||
});
|
||
},
|
||
fail: function(error) {
|
||
console.error(error);
|
||
},
|
||
complete: function(res) {
|
||
console.log(res);
|
||
}
|
||
});
|
||
},
|
||
|
||
// 获取我的位置
|
||
getMyLocation: function (e) {
|
||
var that = this;
|
||
console.log("e",e)
|
||
that.setData({
|
||
markers: e
|
||
})
|
||
|
||
// wx.getLocation({
|
||
// type: 'gcj02',
|
||
// success: function (res) {
|
||
// that.setData({
|
||
// latitude: res.latitude,
|
||
// longitude: res.longitude
|
||
// })
|
||
|
||
// }
|
||
// })
|
||
},
|
||
// marker的点击事件
|
||
bindmarkertap(e,index) {
|
||
console.log('e', e)
|
||
|
||
if(index){
|
||
console.log('index', index)
|
||
// this.getItembridge(index.bridgeName)
|
||
let that = this
|
||
that.setData({
|
||
currMaker: index
|
||
})
|
||
let _markers = that.data.markers
|
||
console.log('_markers', _markers)
|
||
let arr = []
|
||
for (let i = 0; i < _markers.length; i++) {
|
||
if (_markers[i].bridgeName === index.bridgeName) {
|
||
that.setData({
|
||
isChecked:true ,
|
||
list:_markers[i]
|
||
})
|
||
arr.push({
|
||
bridgeName: _markers[i].bridgeName,
|
||
latitude: _markers[i].latitude,
|
||
longitude: _markers[i].longitude,
|
||
img:_markers[i].img,
|
||
id: Number(_markers[i].id),
|
||
width: 40,
|
||
height: 40,
|
||
iconPath: './images/mapIcon.png',
|
||
bridgeLength: _markers[i].bridgeLength,
|
||
bridgeType: _markers[i].bridgeType,
|
||
roadNo: _markers[i].roadNo,
|
||
stakeNo: _markers[i].stakeNo,
|
||
callout: {
|
||
content: _markers[i].bridgeName,
|
||
img:_markers[i].img,
|
||
bridgeLength: _markers[i].bridgeLength,
|
||
bridgeType: _markers[i].bridgeType,
|
||
roadNo: _markers[i].roadNo,
|
||
stakeNo: _markers[i].stakeNo,
|
||
display: 'ALWAYS',
|
||
color: '#333333',
|
||
bgColor: '#fff',
|
||
padding: 10,
|
||
borderRadius: 10,
|
||
borderColor: '#fff',
|
||
fontSize: 16,
|
||
borderWidth: 5,
|
||
textAlign: 'center',
|
||
},
|
||
})
|
||
} else {
|
||
arr.push({
|
||
bridgeName: _markers[i].bridgeName,
|
||
img:_markers[i].img,
|
||
bridgeLength: _markers[i].bridgeLength,
|
||
bridgeType: _markers[i].bridgeType,
|
||
roadNo: _markers[i].roadNo,
|
||
stakeNo: _markers[i].stakeNo,
|
||
latitude: _markers[i].latitude,
|
||
longitude: _markers[i].longitude,
|
||
id: Number(_markers[i].id),
|
||
width: 25,
|
||
height: 25,
|
||
iconPath: './images/mapIcon.png',
|
||
callout: {
|
||
display: 'BYCLICK'
|
||
}
|
||
})
|
||
}
|
||
}
|
||
that.setData({
|
||
markers: arr
|
||
})
|
||
wx.hideLoading({
|
||
success: (res) => {
|
||
console.log(arr)
|
||
},
|
||
})
|
||
}else{
|
||
let that = this
|
||
let _markers = that.data.markers
|
||
console.log('_markers', _markers)
|
||
let markerId = parseInt(e.detail.markerId)
|
||
console.log('markerId', markerId)
|
||
_markers.forEach(item => {
|
||
// console.log('item', item)
|
||
if (Number(item.id) === markerId) {
|
||
// console.log('11111', item)
|
||
that.setData({
|
||
currMaker: item
|
||
})
|
||
}
|
||
})
|
||
let currMaker = that.data.currMaker
|
||
console.log('currMaker', that.data.currMaker)
|
||
this.getItembridge(currMaker.bridgeName)
|
||
// qqmapsdk.calculateDistance({
|
||
// to: [{
|
||
// latitude: currMaker.latitude,
|
||
// longitude: currMaker.longitude
|
||
// }],
|
||
// success: function (res) {
|
||
// console.log("res",res)
|
||
let arr = []
|
||
for (let i = 0; i < _markers.length; i++) {
|
||
if (Number(_markers[i].id) === markerId) {
|
||
console.log("_markers[i].id",_markers[i].id)
|
||
that.setData({
|
||
isChecked:true ,
|
||
list:_markers[i]
|
||
})
|
||
arr.push({
|
||
bridgeName: _markers[i].bridgeName,
|
||
latitude: _markers[i].latitude,
|
||
longitude: _markers[i].longitude,
|
||
img:_markers[i].img,
|
||
id: Number(_markers[i].id),
|
||
bridgeLength: _markers[i].bridgeLength,
|
||
bridgeType: _markers[i].bridgeType,
|
||
roadNo: _markers[i].roadNo,
|
||
stakeNo: _markers[i].stakeNo,
|
||
width: 40,
|
||
height: 40,
|
||
iconPath: './images/mapIcon.png',
|
||
callout: {
|
||
// content: `距您${distanceKm}`,
|
||
content: _markers[i].bridgeName,
|
||
bridgeLength: _markers[i].bridgeLength,
|
||
bridgeType: _markers[i].bridgeType,
|
||
roadNo: _markers[i].roadNo,
|
||
stakeNo: _markers[i].stakeNo,
|
||
img:_markers[i].img,
|
||
display: 'ALWAYS',
|
||
color: '#333333',
|
||
bgColor: '#fff',
|
||
padding: 10,
|
||
borderRadius: 10,
|
||
borderColor: '#fff',
|
||
fontSize: 16,
|
||
borderWidth: 5,
|
||
textAlign: 'center',
|
||
},
|
||
})
|
||
} else {
|
||
arr.push({
|
||
bridgeName: _markers[i].bridgeName,
|
||
img:_markers[i].img,
|
||
bridgeLength: _markers[i].bridgeLength,
|
||
bridgeType: _markers[i].bridgeType,
|
||
roadNo: _markers[i].roadNo,
|
||
stakeNo: _markers[i].stakeNo,
|
||
latitude: _markers[i].latitude,
|
||
longitude: _markers[i].longitude,
|
||
id: Number(_markers[i].id),
|
||
width: 25,
|
||
height: 25,
|
||
iconPath: './images/mapIcon.png',
|
||
callout: {
|
||
display: 'BYCLICK'
|
||
}
|
||
})
|
||
}
|
||
}
|
||
that.setData({
|
||
markers: arr
|
||
})
|
||
wx.hideLoading({
|
||
success: (res) => {
|
||
console.log(arr)
|
||
},
|
||
})
|
||
}
|
||
|
||
// }
|
||
// })
|
||
},
|
||
// 跳转列表
|
||
handleRouter(){
|
||
wx.navigateTo({
|
||
url:'/pages/list/list'
|
||
})
|
||
},
|
||
|
||
getOnlineDistrict(latitude, longitude) {
|
||
var that = this;
|
||
//通过这个方法来实现经纬度反推省市区
|
||
qqmapsdk.reverseGeocoder({
|
||
location: {
|
||
latitude: 34.093003,
|
||
longitude: 118.756021,
|
||
},
|
||
|
||
success: function (res) {
|
||
// var obj = {
|
||
|
||
// latitude: 34.093003,
|
||
// longitude: 118.756021,
|
||
// }
|
||
// that.setData({
|
||
// district:obj
|
||
// })
|
||
// console.log(res,'asda');
|
||
}
|
||
})
|
||
},
|
||
/**
|
||
* 生命周期函数--监听页面初次渲染完成
|
||
*/
|
||
onReady() {
|
||
},
|
||
/**
|
||
* 生命周期函数--监听页面加载
|
||
*/
|
||
onLoad(options) {
|
||
console.log("options",options)
|
||
var that = this
|
||
that.getMainbridge()
|
||
that.getOnlineDistrict()
|
||
// wx.getLocation({
|
||
// type: 'wgs84',
|
||
// // altitude: false,
|
||
// success: (result) => {
|
||
// console.log("result",result)
|
||
// // var obj = {
|
||
// // latitude:result.latitude,longitude:result.longitude
|
||
// // }
|
||
// that.getOnlineDistrict(result.latitude, result.longitude)
|
||
// },
|
||
// });
|
||
|
||
},
|
||
/**
|
||
* 生命周期函数--监听页面显示
|
||
*/
|
||
onShow() {
|
||
|
||
},
|
||
|
||
/**
|
||
* 生命周期函数--监听页面隐藏
|
||
*/
|
||
onHide() {
|
||
|
||
},
|
||
|
||
/**
|
||
* 生命周期函数--监听页面卸载
|
||
*/
|
||
onUnload() {
|
||
|
||
},
|
||
|
||
/**
|
||
* 页面相关事件处理函数--监听用户下拉动作
|
||
*/
|
||
onPullDownRefresh() {
|
||
|
||
},
|
||
|
||
/**
|
||
* 页面上拉触底事件的处理函数
|
||
*/
|
||
onReachBottom() {
|
||
|
||
},
|
||
//点击地图
|
||
handleClickMarker(e){
|
||
console.log("111",e)
|
||
},
|
||
|
||
/**
|
||
* 用户点击右上角分享
|
||
*/
|
||
onShareAppMessage() {
|
||
|
||
}
|
||
}) |