343 lines
9.6 KiB
Vue
343 lines
9.6 KiB
Vue
|
<template>
|
|||
|
|
<view class="page-body">
|
|||
|
|
<div id="txMapContainer" style="width: 100%;height: 100%;"> </div>
|
|||
|
|
<div style="display: none;">
|
|||
|
|
<view id="popView">
|
|||
|
|
<!-- <view><image src="../../../static/logo.png"/></view> -->
|
|||
|
|
<view><image src="https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/em.jpg"/></view>
|
|||
|
|
<view>姓名:张三</view>
|
|||
|
|
<view>页面更新标志：{{ address }}</view>
|
|||
|
|
<view>
|
|||
|
|
<u-button>查看</u-button>
|
|||
|
|
<u-button>选择</u-button>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</div>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import commonConfig from 'common/config.js';
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
myId: uni.getStorageSync('userId') ? uni.getStorageSync('userId') : '',
|
|||
|
|
//地图相关
|
|||
|
|
latitude: '43.86487',
|
|||
|
|
longitude: '',
|
|||
|
|
address: '',
|
|||
|
|
mapScale: 16, // 地图默认放大倍数
|
|||
|
|
markers: [], // 地图上markers列表
|
|||
|
|
cmap: null, //当前的map对象
|
|||
|
|
infoWindow: null,
|
|||
|
|
marker: null,
|
|||
|
|
socketConnect: null,
|
|||
|
|
pointMap: {},//点map
|
|||
|
|
pointThread: null,
|
|||
|
|
massageTypeId: null,
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
onLoad(e) {
|
|||
|
|
let that = this;
|
|||
|
|
that.massageTypeId = e.massageTypeId;
|
|||
|
|
that.getLocation();
|
|||
|
|
},
|
|||
|
|
onReady(){
|
|||
|
|
console.log('this ->',this,uni);
|
|||
|
|
this.initMap();
|
|||
|
|
this.initMapPointThread();
|
|||
|
|
},
|
|||
|
|
onShow() {
|
|||
|
|
},
|
|||
|
|
onUnload() {
|
|||
|
|
this.closeSocket();
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
log(...d){
|
|||
|
|
console.log(this,...d);
|
|||
|
|
},
|
|||
|
|
getLocation(){
|
|||
|
|
let that = this;
|
|||
|
|
//获取地理坐标
|
|||
|
|
uni.getLocation({
|
|||
|
|
// type: 'wgs84',
|
|||
|
|
type: 'gcj02',
|
|||
|
|
//isHighAccuracy: true,
|
|||
|
|
success: function(res) {
|
|||
|
|
let longitude = res.longitude;
|
|||
|
|
let latitude = res.latitude;
|
|||
|
|
console.log('当前位置的经度：' + longitude);
|
|||
|
|
console.log('当前位置的纬度：' + latitude);
|
|||
|
|
getApp().globalData['longitude'] = longitude;
|
|||
|
|
getApp().globalData['latitude'] = latitude;
|
|||
|
|
|
|||
|
|
console.log('定位成功',latitude, longitude);
|
|||
|
|
if(that.cmap){
|
|||
|
|
that.cmap.setCenter(new TMap.LatLng(latitude, longitude));
|
|||
|
|
}
|
|||
|
|
if(that.infoWindow){
|
|||
|
|
that.infoWindow.setPosition(new TMap.LatLng(latitude, longitude));
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
//读取缓存里面的经纬度
|
|||
|
|
let longitude = getApp().globalData['longitude'] || -1;
|
|||
|
|
let latitude = getApp().globalData['latitude'] || -1;
|
|||
|
|
return { latitude, longitude };
|
|||
|
|
},
|
|||
|
|
initMap() {
|
|||
|
|
let that = this;
|
|||
|
|
//读取缓存里面的经纬度
|
|||
|
|
let longitude = getApp().globalData['longitude'] || -1;
|
|||
|
|
let latitude = getApp().globalData['latitude'] || -1;
|
|||
|
|
|
|||
|
|
let center = new TMap.LatLng(latitude, longitude);//设置中心点坐标
|
|||
|
|
//初始化地图
|
|||
|
|
let map = new TMap.Map("txMapContainer", {
|
|||
|
|
center: center
|
|||
|
|
});
|
|||
|
|
//初始化infoWindow
|
|||
|
|
var infoWindow = that.creatInfoWindow(map);
|
|||
|
|
that.infoWindow = infoWindow;
|
|||
|
|
that.cmap = map;
|
|||
|
|
that.address = Math.random()
|
|||
|
|
|
|||
|
|
let marker = that.creatMarker(map);
|
|||
|
|
that.marker = marker;
|
|||
|
|
console.log('marker ->',marker);
|
|||
|
|
|
|||
|
|
infoWindow.close();//初始关闭信息窗关闭
|
|||
|
|
},
|
|||
|
|
creatInfoWindow(map){
|
|||
|
|
//读取缓存里面的经纬度
|
|||
|
|
let longitude = getApp().globalData['longitude'] || -1;
|
|||
|
|
let latitude = getApp().globalData['latitude'] || -1;
|
|||
|
|
return new TMap.InfoWindow({
|
|||
|
|
map,
|
|||
|
|
position: new TMap.LatLng(latitude, longitude),
|
|||
|
|
offset: { x: 0, y: -32 } //设置信息窗相对position偏移像素
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
creatMarker(map){
|
|||
|
|
let that = this;
|
|||
|
|
let geometries = [];
|
|||
|
|
Object.keys(that.pointMap).forEach(k => {
|
|||
|
|
let data = that.pointMap[k];
|
|||
|
|
if(data){
|
|||
|
|
let xy = data.split(',');
|
|||
|
|
let x = Number(xy[0]);
|
|||
|
|
let y = Number(xy[1]);
|
|||
|
|
geometries.push({
|
|||
|
|
id: k,
|
|||
|
|
styleId: 'marker',
|
|||
|
|
position: new TMap.LatLng(x, y),
|
|||
|
|
properties: {
|
|||
|
|
title: "marker"
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
//初始marker
|
|||
|
|
let marker = new TMap.MultiMarker({
|
|||
|
|
id: 'marker-layer',
|
|||
|
|
map,
|
|||
|
|
styles: {
|
|||
|
|
"marker": new TMap.MarkerStyle({
|
|||
|
|
"width": 24,
|
|||
|
|
"height": 35,
|
|||
|
|
"anchor": { x: 12, y: 35 },
|
|||
|
|
"src": 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/markerDefault.png'
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
geometries,
|
|||
|
|
});
|
|||
|
|
//监听标注点击事件
|
|||
|
|
let infoWindow = that.infoWindow;
|
|||
|
|
marker.on("click", function (evt) {
|
|||
|
|
//设置infoWindow
|
|||
|
|
that.address = Math.random()
|
|||
|
|
infoWindow.open(); //打开信息窗
|
|||
|
|
infoWindow.setPosition(evt.geometry.position);//设置信息窗位置
|
|||
|
|
//等待一点点，
|
|||
|
|
that.$nextTick(() => {
|
|||
|
|
//使用弹窗模板
|
|||
|
|
infoWindow.setContent(document.querySelector('#popView').innerHTML);//设置信息窗内容
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
return marker;
|
|||
|
|
},
|
|||
|
|
updateMarker(map){
|
|||
|
|
let that = this;
|
|||
|
|
let geometries = [];
|
|||
|
|
Object.keys(that.pointMap).forEach(k => {
|
|||
|
|
let data = that.pointMap[k];
|
|||
|
|
if(data){
|
|||
|
|
let xy = data.split(',');
|
|||
|
|
let x = Number(xy[0]);
|
|||
|
|
let y = Number(xy[1]);
|
|||
|
|
geometries.push({
|
|||
|
|
id: k,
|
|||
|
|
styleId: 'marker',
|
|||
|
|
position: new TMap.LatLng(x, y),
|
|||
|
|
properties: {
|
|||
|
|
title: "marker"
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
if(that.marker){
|
|||
|
|
that.marker.setGeometries(geometries);
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
getUserId(){
|
|||
|
|
return this.myId;
|
|||
|
|
},
|
|||
|
|
getBusinessId(){
|
|||
|
|
// return '12345678900987654321';
|
|||
|
|
return this.massageTypeId;
|
|||
|
|
// return '98';
|
|||
|
|
},
|
|||
|
|
creatSocket(){
|
|||
|
|
let deviceId = this.getBusinessId();
|
|||
|
|
let socketConnect = uni.connectSocket({
|
|||
|
|
url: commonConfig.WS_UPLOAD_MAP_PATH + deviceId,
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
msg: ''
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
header: {
|
|||
|
|
'content-type': 'application/json',
|
|||
|
|
// 'token': token
|
|||
|
|
},
|
|||
|
|
method: 'GET',
|
|||
|
|
success(res) {
|
|||
|
|
// 这里是接口调用成功的回调，不是连接成功的回调，请注意
|
|||
|
|
// uni.showLoading({
|
|||
|
|
// title: '连接成功！'
|
|||
|
|
// });
|
|||
|
|
},
|
|||
|
|
fail(err) {
|
|||
|
|
// 这里是接口调用失败的回调，不是连接失败的回调，请注意
|
|||
|
|
// uni.showLoading({
|
|||
|
|
// title: '连接失败！'
|
|||
|
|
// });
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
uni.onSocketOpen((res) => {
|
|||
|
|
// uni.hideLoading()
|
|||
|
|
// uni.showToast({
|
|||
|
|
// icon: 'none',
|
|||
|
|
// title: '连接成功'
|
|||
|
|
// })
|
|||
|
|
console.log('onOpen', res);
|
|||
|
|
});
|
|||
|
|
uni.onSocketError((err) => {
|
|||
|
|
// this.connecting = false
|
|||
|
|
// this.connected = false
|
|||
|
|
// uni.hideLoading()
|
|||
|
|
// uni.showModal({
|
|||
|
|
// content: '网络较差，请稍后再试',
|
|||
|
|
// showCancel: false
|
|||
|
|
// })
|
|||
|
|
console.log('onError', err);
|
|||
|
|
});
|
|||
|
|
uni.onSocketMessage((res) => {
|
|||
|
|
let that = this;
|
|||
|
|
console.log('onMessage', res)
|
|||
|
|
let datas = JSON.parse(res.data)
|
|||
|
|
// let data = {
|
|||
|
|
// chat: {
|
|||
|
|
// userHead: '../../static/logo.png'
|
|||
|
|
// },
|
|||
|
|
// content: datas.content,
|
|||
|
|
// type: datas.type,
|
|||
|
|
// sendType: datas.sendType
|
|||
|
|
// }
|
|||
|
|
// that.ListItem.push(data);
|
|||
|
|
//解析点
|
|||
|
|
this.pointMap = {};
|
|||
|
|
switch(datas.type){
|
|||
|
|
case 'getCoordinate': {
|
|||
|
|
this.pointMap = datas.data;
|
|||
|
|
//that.creatMarker(that.cmap);
|
|||
|
|
that.updateMarker(datas.data);
|
|||
|
|
break;
|
|||
|
|
}
|
|||
|
|
default: {
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
});
|
|||
|
|
uni.onSocketClose((res) => {
|
|||
|
|
console.log('onClose', res)
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
this.socketConnect = socketConnect;
|
|||
|
|
uni.userSocketConnect = socketConnect;
|
|||
|
|
},
|
|||
|
|
sendMsg(msg){
|
|||
|
|
uni.sendSocketMessage({
|
|||
|
|
data: JSON.stringify(msg),
|
|||
|
|
success: (...e)=> {
|
|||
|
|
console.log('发送成功！',...e);
|
|||
|
|
},
|
|||
|
|
fail: (...e)=> {
|
|||
|
|
console.log('发送失败！',...e);
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
closeSocket(){
|
|||
|
|
uni.closeSocket();
|
|||
|
|
//temp1.pointThread
|
|||
|
|
clearInterval(this.pointThread);
|
|||
|
|
},
|
|||
|
|
initMapPointThread(){
|
|||
|
|
let that = this;
|
|||
|
|
//创建连接
|
|||
|
|
if(!that.socketConnect){
|
|||
|
|
that.socketConnect = uni.userSocketConnect;
|
|||
|
|
} if(uni.userSocketConnect){
|
|||
|
|
that.socketConnect = uni.userSocketConnect;
|
|||
|
|
}else{
|
|||
|
|
that.creatSocket();
|
|||
|
|
}
|
|||
|
|
//开始循环
|
|||
|
|
that.forSendMsg();
|
|||
|
|
},
|
|||
|
|
forSendMsg(){
|
|||
|
|
let that = this;
|
|||
|
|
if(!that.mapPointThreadIsRun){
|
|||
|
|
let pointThread = setInterval(()=>{
|
|||
|
|
that.sendMsgFn();
|
|||
|
|
},5000);
|
|||
|
|
this.pointThread = pointThread;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
sendMsgFn(){
|
|||
|
|
let that = this;
|
|||
|
|
let userId = that.getUserId();
|
|||
|
|
let businessId = that.getBusinessId();
|
|||
|
|
let msg = {
|
|||
|
|
sendType: "getCoordinate",
|
|||
|
|
userId,
|
|||
|
|
businessId,
|
|||
|
|
rkey : `map:location:${businessId}:*`
|
|||
|
|
}
|
|||
|
|
that.sendMsg(msg);
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss">
|
|||
|
|
page {
|
|||
|
|
background-color: #F7F7F7;
|
|||
|
|
}
|
|||
|
|
.page-body {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100vh;
|
|||
|
|
}
|
|||
|
|
</style>
|