// miniprogram/pages/earth/earth.js
// 引入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: 113.324520,
latitude: 23.099994,
longitude84: 113.324520,
latitude84: 23.099994,
markers: [{
id: 0,
iconPath: "../../images/locat.png",
latitude: 23.099994,
longitude: 113.324520,
width: 50,
height: 50
}],
controls: [],
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
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)
})
}
})
}
}),
//设置地图组件
wx.getSystemInfo({
success(res) {
var windowWidth = res.windowWidth
var windowHeight = res.windowHeight
var query = wx.createSelectorQuery()
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/locat.png',
position: {
left: res[0].width/2,
top: res[0].height/2,
width: 30,
height: 30
},
clickable: true
}]
})
})
}
}),
// 实例化API核心类
qqmapsdk = new QQMapWX({
key: 'BGPBZ-C5O3P-ROUDR-LWC4J-63EKH-V5FRX'
})
if (options.devcode) {
var that = this
var devcode = options.devcode
wx.cloud.callFunction({
name: 'findListByCodes',
data: {
devcodes: devcode,
url: app.globalData.url + "appDeviceAdd/findListByCodes"
},
}).then(res => {
if (res.result.code == 200) {
var listResultData = res.result.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: listResultData[i].id,
callout: {
content: listResultData[i].devcode,
fontSize: '14',
// padding: true,
color: '#00000',
borderColor: '#F4EA2A',
bgColor: '#F4EA2A',
borderWidth: 5,
display: 'ALWAYS',
textAlign: 'center',
// borderRadius: 15
},
latitude: listResultData[i].latitude,
longitude: listResultData[i].longitude,
width: 40,
height: 40
});
}
this.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
})
}
}).catch(err => {
console.error(err);
wx.showToast({
title: "无法获取设备地理信息！",
icon: 'none',
duration: 2000
})
})
}
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
},
controltap: function (e) {
// console.log(e.controlId);
//进入添加设备页
if (1 == e.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 == e.controlId) {
wx.navigateTo({
url: '../addDevice/addDevice'
})
} else if (2 == e.controlId) {
this.setData({
show: true
});
} else if (4 == e.controlId) {
wx.openLocation({
latitude: Number(this.data.marker_latitude),
longitude: Number(this.data.marker_longitude),
name: this.data.title,
scale: 35
})
} else if (5 == e.controlId) {
var flag = this.data.enableSsatellite;
this.setData({
enableSsatellite: !flag
});
} else if (6 == e.controlId) {
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)
})
}
})
}
})
}
},
showPopup() {
this.setData({
show: true
});
},
onClose() {
this.setData({
show: false
});
},
leave() {
var that = this;
if (that.data.devcodes == "") {
return false;
}
wx.cloud.callFunction({
name: 'findListByCodes',
data: {
devcodes: that.data.devcodes,
url: app.globalData.url + "appDeviceAdd/findListByCodes"
},
}).then(res => {
if (res.result.code == 200) {
var listResultData = res.result.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: listResultData[i].id,
callout: {
content: listResultData[i].devcode,
fontSize: '14',
// padding: true,
color: '',
borderColor: '#F4EA2A',
bgColor: '#F4EA2A',
borderWidth: 5,
display: 'ALWAYS',
textAlign: 'center',
// borderRadius: 15
},
latitude: listResultData[i].latitude,
longitude: listResultData[i].longitude,
width: 40,
height: 40
});
}
this.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
})
}
}).catch(err => {
console.error(err);
wx.showToast({
title: "无法获取设备地理信息！",
icon: 'none',
duration: 2000
})
})
},
markertap(e) {
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
// })
}
},
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) {
if (res && res.data) {
_this.setData({
isShow: true,
tips: res.data
});
}
}
})
},
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) {
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
})
},
})
