// miniprogram/pages/earth/earth.js
const screenWidth = wx.getSystemInfoSync().windowWidth
const screenHeight = wx.getSystemInfoSync().windowHeight
// 引入SDK核心类
var QQMapWX = require('../../libs/qqmap-wx-jssdk.js');
var qqmapsdk;
var app = getApp();
Page({
/**
* 页面的初始数据
*/
data: {
listData: [],
devcodes: "",
marker_latitude: "",
marker_longitude: "",
title: "",
isShow: false,
tips: [],
value: '',
show: false,
enableSsatellite: false,
windowWidth: 0,
longitude: "116.627340",
latitude: "39.874390",
longitude84: "",
latitude84: "",
markers: [],
controls: [], // 控件集合
position1: {
right: '20rpx',
top: '40rpx',
},
position2: {
right: '20rpx',
top: '120rpx',
},
position3: {
right: '20rpx',
top: '200rpx',
},
position4: {
right: '20rpx',
bottom: '200rpx',
},
position5: {
left: '20rpx',
bottom: '200rpx',
},
position6: {
left: '20rpx',
bottom: '120rpx',
},
position7: {
left: '46%',
top: '46%',
},
position8: {
right: '20rpx',
bottom: '120rpx',
},
position9: {
right: '20rpx',
top: '280rpx',
},
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var that = this;
//设置地图组件
wx.getSystemInfo({
success(res) {
var windowWidth = res.windowWidth
var windowHeight = res.windowHeight
var query = wx.createSelectorQuery()
var platform =res.platform
query.select('#map').boundingClientRect()
query.exec(function (res) {
that.setData({
controls: [{
id: 1,
iconPath: '../../images/copy.png',
position: {
left: windowWidth - 40,
top: 20,
width: 30,
height: 30
},
clickable: true
}, {
id: 2,
iconPath: '../../images/write.png',
position: {
left: windowWidth - 40,
top: 60,
width: 30,
height: 30
},
clickable: true
}, {
id: 3,
iconPath: '../../images/add.png',
position: {
left: windowWidth - 40,
top: 100,
width: 30,
height: 30
},
clickable: true
}, {
id: 4,
iconPath: '../../images/navigation.png',
position: {
left: windowWidth - 40,
top: windowHeight - 100,
width: 30,
height: 30
},
clickable: true
}, {
id: 5,
iconPath: '../../images/gps.png',
position: {
left: 10,
top: windowHeight - 100,
width: 30,
height: 30
},
clickable: true
}, {
id: 6,
iconPath: '../../images/aim.png',
position: {
left: 10,
top: windowHeight - 140,
width: 30,
height: 30
},
clickable: true
}, {
id: 7,
iconPath: '../../images/applocat.png',
position: {
left: res[0].width / 2 - 20,
top: platform=="ios"?res[0].height / 2 - 80:res[0].height / 2 - 40,
width: 40,
height: 40
},
clickable: true
}, {
id: 8,
iconPath: '../../images/back.png',
position: {
left: windowWidth - 40,
top: windowHeight - 140,
width: 30,
height: 30
},
clickable: true
}]
})
})
}
})
// 实例化API核心类
qqmapsdk = new QQMapWX({
key: 'BGPBZ-C5O3P-ROUDR-LWC4J-63EKH-V5FRX'
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
//输入设备编号获取marker位置信息
var that = this;
if (app.globalData.devcode!="") {
var devcode = app.globalData.devcode
wx.request({
method: "POST",
url: app.globalData.httpsUrl + "appDeviceAdd/findListByCodes",
data: {
devcodes: devcode,
},
header: {
'content-type': 'application/x-www-form-urlencoded;charset=utf-8'
},
success(res) {
app.globalData.devcode="";
if (res.data.code == 200) {
var listResultData = res.data.data;
that.setData({
listData: listResultData
})
var markersArr = that.data.markers;
for (var i = 0; i < listResultData.length; i++) {
markersArr = markersArr.concat({
iconPath: "../../images/locat.png",
id: Number(listResultData[i].id),
callout: {
content: "编号:"+listResultData[i].devcode+"\r\n位置:"+listResultData[i].position+"\r\n时间:"+listResultData[i].createtime,
fontSize: '14',
padding: true,
color: '#000000',
borderColor: '#F4EA2A',
bgColor: '#F4EA2A',
borderWidth: 5,
display: 'ALWAYS',
textAlign: 'left',
devcode: listResultData[i].devcode
// borderRadius: 15
},
latitude: listResultData[i].latitude,
longitude: listResultData[i].longitude,
width: 40,
height: 40,
devcode: listResultData[i].devcode
});
}
that.setData({
markers: markersArr,
latitude: listResultData[0].latitude,
longitude: listResultData[0].longitude,
marker_latitude: listResultData[0].latitude,
marker_longitude: listResultData[0].longitude,
title: listResultData[0].devcode
})
}
},
fail(err) {
app.globalData.devcode="";
wx.showToast({
title: "无法获取设备地理信息！",
icon: 'none',
duration: 2000
})
}
})
} else {
if(app.globalData.position && app.globalData.position.length) {
console.log('-0-0-0-0',app.globalData.position );
that.setData({
latitude: app.globalData.position[0].latitude,
longitude: app.globalData.position[0].longitude,
})
} else {
//获取当前坐标（gcj02）
wx.getLocation({
type: "gcj02",
altitude: true,
success: function (res) {
that.setData({
latitude: parseFloat(res.latitude).toFixed(6),
longitude: parseFloat(res.longitude).toFixed(6),
// markers: [{
// latitude: res.latitude,
// longitude: res.longitude,
// }]
})
//获取当前坐标（wgs84）,特别注意需要放在加载里面，否则获取有误
wx.getLocation({
type: "wgs84",
altitude: true,
success: function (res) {
that.setData({
latitude84: parseFloat(res.latitude).toFixed(6),
longitude84: parseFloat(res.longitude).toFixed(6)
})
}
})
}
})
}
}
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
},
//定位出来
locationPosition: function () {
var that = this;
//获取当前坐标（gcj02）
wx.getLocation({
type: "gcj02",
altitude: true,
success: function (res) {
that.setData({
latitude: parseFloat(res.latitude).toFixed(6),
longitude: parseFloat(res.longitude).toFixed(6),
// markers: [{
// latitude: res.latitude,
// longitude: res.longitude
// }]
})
//获取当前坐标（wgs84）,特别注意需要放在加载里面，否则获取有误
wx.getLocation({
type: "wgs84",
altitude: true,
success: function (res) {
that.setData({
latitude84: parseFloat(res.latitude).toFixed(6),
longitude84: parseFloat(res.longitude).toFixed(6)
})
}
})
}
})
},
//加载地图组件
controltap: function (e) {
const controlId = e.currentTarget.dataset.controlid
console.log(controlId);
//进入添加设备页
if (1 == controlId) {
wx.setClipboardData({
data: this.data.latitude + "," + this.data.longitude + "," + this.data.latitude84 + "," + this.data.longitude84,
success: function (res) {
wx.getClipboardData({
success: function (res) {
wx.showToast({
title: '复制坐标成功'
})
}
})
}
})
} else if (3 == controlId) {
//先定位
// this.locationPosition()
wx.setClipboardData({
data: this.data.latitude + "," + this.data.longitude + "," + this.data.latitude84 + "," + this.data.longitude84,
success: function (res) {
wx.showToast({
title: '坐标已获取',
duration: 1000
})
}
})
wx.navigateTo({
url: '../addDevice/addDevice'
})
} else if (2 == controlId) { // 铅笔
console.log('点击铅笔')
this.setData({
devcodes: "",
show: true
});
} else if (4 == controlId) {
wx.openLocation({
latitude: Number(this.data.marker_latitude),
longitude: Number(this.data.marker_longitude),
name: this.data.title,
scale: 35
})
} else if (5 == controlId) {
var flag = this.data.enableSsatellite;
this.setData({
enableSsatellite: !flag
});
} else if (6 == controlId) {
//先清marker
this.setData({
markers: []
})
this.locationPosition()
}else if (8 == controlId) {
//跳转日志缓存页
wx.switchTab({
url: '../applog/applog',
})
}else if (9 == controlId) {
console.log('跳转地图页面');
//跳转日志缓存页
wx.navigateTo({
url: '../defineMap/defineMap',
})
}
},
showPopup() {
this.setData({
show: true
});
},
onClose() {
this.setData({
show: false
});
},
//获取设备maker
leave() {
var that = this;
console.log(that.data)
console.log(that.data.devcodes)
if (that.data.devcodes == "") {
// that.setData({
// markers:[]
// })
wx.showToast({
icon: 'none',
title: '请先输入定位设备编号',
})
return false;
}
wx.request({
method: "POST",
url: app.globalData.httpsUrl + "appDeviceAdd/findListByCodes",
data: {
devcodes: that.data.devcodes
},
header: {
'content-type': 'application/x-www-form-urlencoded;charset=utf-8'
},
success(res) {
if (res.data.code == 200) {
var listResultData = res.data.data;
if(!listResultData.length) {
wx.showToast({
title: "查无结果！",
icon: 'none',
duration: 2000
})
that.setData({
show: false
});
} else {
that.setData({
listData: listResultData
})
var markersArr = []
for (var i = 0; i < listResultData.length; i++) {
let arr = {
iconPath: "../../images/locat.png",
id: Number(listResultData[i].id),
callout: {
content: "编号:"+listResultData[i].devcode+"\r\n位置:"+listResultData[i].position+"\r\n时间:"+listResultData[i].createtime,
fontSize: '14',
// padding: true,
color: '#212121',
borderColor: '#F4EA2A',
bgColor: '#F4EA2A',
borderWidth: 5,
display: 'ALWAYS',
textAlign: 'left',
// borderRadius: 15
devcode: listResultData[i].devcode
},
latitude: listResultData[i].latitude,
longitude: listResultData[i].longitude,
width: 40,
height: 40,
devcode: listResultData[i].devcode
};
markersArr.push(arr)
}
that.setData({
markers: markersArr,
latitude: listResultData[0].latitude,
longitude: listResultData[0].longitude,
marker_latitude: listResultData[0].latitude,
marker_longitude: listResultData[0].longitude,
title: listResultData[0].devcode
})
that.setData({
show: false
});
}
}
},
fail(err) {
wx.showToast({
title: "无法获取设备地理信息！",
icon: 'none',
duration: 2000
})
}
})
},
showLoading: function (message) {
if (wx.showLoading) {
// 基础库 1.1.0 微信6.5.6版本开始支持，低版本需做兼容处理
wx.showLoading({
title: message,
mask: true
});
} else {
// 低版本采用Toast兼容处理并将时间设为20秒以免自动消失
wx.showToast({
title: message,
icon: 'loading',
mask: true,
duration: 20000
});
}
},
hideLoading: function () {
if (wx.hideLoading) {
// 基础库 1.1.0 微信6.5.6版本开始支持，低版本需做兼容处理
wx.hideLoading();
} else {
wx.hideToast();
}
},
// 点击标记点
markertap(e) {
console.log('点击标记点')
var that = this;
for (var i = 0; i < this.data.listData.length; i++) {
if (e.markerId == this.data.listData[i].id) {
this.setData({
marker_latitude: this.data.listData[i].latitude,
marker_longitude: this.data.listData[i].longitude,
title: this.data.listData[i].devcode
})
}
// wx.openLocation({
// latitude: Number(that.data.marker_latitude),
// longitude: Number(that.data.marker_longitude),
// name: that.data.title,
// scale: 35
// })
}
// 点击的标记点可以做气泡的显隐
const index = this.data.markers.findIndex(item => item.id === e.markerId)
if(index !== -1) {
let tempMarkers = this.data.markers.map((item, i) => {
if(index === i) {
item.callout.display = item.callout.display === "BYCLICK" ? 'ALWAYS' : "BYCLICK"
}
return item
})
this.setData({
markers: tempMarkers
})
}
},
// 点击气泡
bindcallouttap: function (e) {
var that = this;
const index = this.data.markers.findIndex(item => Number(item.id) === Number(e.markerId))
if(index !== -1) {
that.showLoading("数据请求中...");
wx.request({
method: "POST",
url: app.globalData.httpsUrl + "appDeviceLog/deviceDetail",
data: {
devcode: this.data.markers[index].devcode,
},
header: {
'content-type': 'application/x-www-form-urlencoded;charset=utf-8'
},
success(res) {
that.hideLoading();
// var resultObject = JSON.parse(res.data);
var resultObject = res.data;
var pageName = '../applog/applog'
if (resultObject.code == 200) {
wx.setStorageSync('resultObject', resultObject.data)
wx.navigateTo({
url: '../addDevicelog/addDeviceLog?detail=' + "&pageName=" + pageName
})
// app.globalData.positionDevcode = this.data.markers[index].devcode
app.globalData.position = [that.data.markers[index].marker_latitude, that.data.markers[index].marker_longitude]
console.log(app.globalData.position);
}
},
fail(err) {
that.hideLoading();
}
})
}
},
bindregionchange: function (e) {
var that = this
if (e.causedBy == "drag") {
var mapCtx = wx.createMapContext("map")
mapCtx.getCenterLocation({
// type: "gcj02",
success: function (res) {
// var markersArr = that.data.markers
// for (var i = 0; i < markersArr.length; i++) {
// if (markersArr[i].iconPath == undefined) {
// markersArr.splice(i, 1)
// }
// }
var latitude = res.latitude
var longitude = res.longitude
// markersArr = markersArr.concat({
// latitude: latitude,
// longitude: longitude
// })
//拖拽地图获取不到84坐标系，保存为空
that.setData({
latitude: parseFloat(latitude).toFixed(6),
longitude: parseFloat(longitude).toFixed(6),
latitude84: "",
longitude84: "",
// markers: markersArr
})
// mapCtx.moveToLocation();
// that.getLocal(latitude, longitude)
}
})
}
},
onChange: function (e) {
this.setData({
value: e.detail,
});
var _this = this;
// 调用接口
qqmapsdk.search({
keyword: this.data.value,
success: function (res) {
console.log(res)
if (res && res.data) {
_this.setData({
isShow: true,
tips: res.data
});
}
},
complete: function (res){
console.log(res);
}
})
},
bindSearch: function (e) {
var location = e.target.dataset.location;
this.setData({
isShow: false,
longitude: location.lng,
latitude: location.lat,
marker_latitude: location.lat,
marker_longitude: location.lng,
title: e.target.dataset.keywords,
value: e.target.dataset.keywords,
markers: [{
id: 0,
longitude: location.lng,
latitude: location.lat,
iconPath: '../../images/locat.png',
width: 50,
height: 50,
}]
})
},
confirmdevcodes: function (event) {
console.log('设备编号', event.detail.value);
var that = this;
that.setData({
devcodes: event.detail.value
});
},
onClick: function () {
// 调用接口
qqmapsdk.search({
keyword: this.data.value,
success: function (res) {
console.log(res);
},
fail: function (res) {
console.log(res);
},
complete: function (res) {
console.log(res);
}
});
},
confirm(event) {
var that = this;
var formValue = event.detail.value;
var formName = event.target.dataset.id;
var fromN = 'form.' + [formName];
that.setData({
[fromN]: formValue
})
},
})
