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