dyf/APP
1
0
Fork 1
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

地图动态打点

Browse Source
This commit is contained in:
fengerli
2025-08-01 16:36:43 +08:00
parent 4d52f5d42a
commit 6b409f4272
3 changed files with 232 additions and 219 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
pages/210/deviceControl/index.vue
View File

@ -702,7 +702,7 @@
this.mqttClient.connect(() => { this.mqttClient.connect(() => {
console.log('MQTT 连接成功，开始订阅主题'); console.log('MQTT 连接成功，开始订阅主题');
// 订阅来自设备的状态更新 // 订阅来自设备的状态更新
const statusTopic = `A/${this.itemInfo.id}`; const statusTopic = `A/${this.itemInfo.deviceImei}`;
this.mqttClient.subscribe(statusTopic, (payload) => { this.mqttClient.subscribe(statusTopic, (payload) => {
console.log(`收到来自 ${statusTopic} 的消息:`, payload); console.log(`收到来自 ${statusTopic} 的消息:`, payload);
// uni.showModal({ // uni.showModal({

34
pages/6170/deviceControl/index.vue
View File

@ -307,15 +307,23 @@
}, },
// *******定位****** // *******定位******
gpsPosition(item) { gpsPosition(item) {
// 添加调试日志
uni.navigateTo({ uni.navigateTo({
url: '/pages/common/map/index', url: '/pages/common/map/index',
events: {
ack: function(data) {}
},
success: (res) => { success: (res) => {
res.eventChannel.emit('MapData', { // 确保使用深拷贝
data: item const mapData = {
}); deviceLocation: {
longitude: String(item.longitude), // 强制转为字符串
latitude: String(item.latitude),
deviceImage: item.devicePic || '',
deviceName: item.deviceImei || ''
}
}
res.eventChannel.emit('MapData', JSON.parse(JSON.stringify(mapData)))
},
fail: (err) => {
} }
}) })
}, },
@ -661,12 +669,6 @@
}); });
} }
}) })
// const topic = `device/command/${this.deviceID}/message`;
// this.mqttClient.publish(topic, this.messageToSend);
// uni.showToast({
// title: '消息已发送',
// icon: 'success'
// });
}, },
// 统一处理返回方法 // 统一处理返回方法
handleDeviceData(res, isFromShared = false) { handleDeviceData(res, isFromShared = false) {
@ -745,7 +747,7 @@
this.mqttClient.connect(() => { this.mqttClient.connect(() => {
console.log('MQTT 连接成功，开始订阅主题'); console.log('MQTT 连接成功，开始订阅主题');
// 订阅来自设备的状态更新 // 订阅来自设备的状态更新
const statusTopic = `A/${this.deviceID}`; const statusTopic = `A/${this.itemInfo.deviceImei}`;
this.mqttClient.subscribe(statusTopic, (payload) => { this.mqttClient.subscribe(statusTopic, (payload) => {
console.log(`收到来自 ${statusTopic} 的消息:`, payload); console.log(`收到来自 ${statusTopic} 的消息:`, payload);
// ✅ 发送全局事件通知主页面更新 // ✅ 发送全局事件通知主页面更新
@ -928,12 +930,14 @@
color: rgba(255, 255, 255, 0.6); color: rgba(255, 255, 255, 0.6);
text-align: end; text-align: end;
} }
.locationGPS { .locationGPS {
width:88%; width: 88%;
text-align: end; text-align: end;
float: right; float: right;
line-height:50rpx; line-height: 50rpx;
} }
.control-card { .control-card {
background-color: rgb(26, 26, 26); background-color: rgb(26, 26, 26);
border-radius: 16rpx; border-radius: 16rpx;

415
pages/common/map/index.vue
View File

@ -1,67 +1,67 @@
<template> <template>
<view class="map-container"> <view class="map-container">
<!-- 背景保护层 --> <!-- 背景保护层 -->
<view class="map-background"></view> <view class="map-background"></view>
<view id="mapWrapper" ref="mapRef" class="map-wrapper"></view> <view id="mapWrapper" ref="mapRef" class="map-wrapper"></view>
<!-- 加载提示 --> <!-- 加载提示 -->
<view v-if="loading" class="loading-mask"> <view v-if="loading" class="loading-mask">
<view class="loading-content">地图加载中...</view> <view class="loading-content">地图加载中...</view>
</view> </view>
</view> </view>
</template> </template>
<script> <script>
export default { export default {
data() { data() {
return { return {
loading: true loading: true
} }
}, },
methods: { methods: {
hideLoading() { hideLoading() {
this.loading = false this.loading = false
} }
} }
} }
</script> </script>
<script module="amap" lang="renderjs"> <script module="amap" lang="renderjs">
export default { export default {
data() { data() {
return { return {
markers: [], markers: [],
customPopup: null customPopup: null
} }
}, },
mounted() { mounted() {
// 初始设置背景色 // 初始设置背景色
const container = document.getElementById('mapWrapper') const container = document.getElementById('mapWrapper')
container.style.backgroundColor = '#121212' container.style.backgroundColor = '#121212'
container.style.transition = 'background 0.5s' container.style.transition = 'background 0.5s'
this.initMap()
},
methods: {
async loadScript(url) {
return new Promise((resolve) => {
const script = document.createElement('script')
script.src = url
script.onload = resolve
document.head.appendChild(script)
})
},
async initMap() { this.initMap()
try { },
// 动态加载SDK methods: {
if (!window.AMap) { async loadScript(url) {
await this.loadScript( return new Promise((resolve) => {
'https://webapi.amap.com/maps?v=2.0&key=90bc158992feb8ccd0145e168cab1307' const script = document.createElement('script')
) script.src = url
} script.onload = resolve
document.head.appendChild(script)
})
},
const container = document.getElementById('mapWrapper') async initMap() {
container.innerHTML = ` try {
// 动态加载SDK
if (!window.AMap) {
await this.loadScript(
'https://webapi.amap.com/maps?v=2.0&key=90bc158992feb8ccd0145e168cab1307'
)
}
const container = document.getElementById('mapWrapper')
container.innerHTML = `
<div id="amapContainer" style=" <div id="amapContainer" style="
width:100%; width:100%;
height:100%; height:100%;
@ -71,173 +71,182 @@ export default {
"></div> "></div>
` `
// 初始化地图 // 初始化地图
this.map = new AMap.Map('amapContainer', { this.map = new AMap.Map('amapContainer', {
viewMode: '3D', viewMode: '3D',
zoom: 13, zoom: 13,
center: [114.305, 30.592], center: [114.305, 30.592],
mapStyle: 'amap://styles/grey' mapStyle: 'amap://styles/grey'
}) })
// 地图加载完成后淡入 // 地图加载完成后淡入
this.map.on('complete', () => { this.map.on('complete', () => {
document.getElementById('amapContainer').style.opacity = 1 document.getElementById('amapContainer').style.opacity = 1
this.$ownerInstance.callMethod('hideLoading') this.$ownerInstance.callMethod('hideLoading')
// 添加标记点
// 添加标记点 const wuhanPoints = [{
const wuhanPoints = [ lnglat: [114.404, 30.507],
{ lnglat: [114.404, 30.507], name: "华中科技大学" }, name: "华中科技大学"
{ lnglat: [114.428, 30.476], name: "光谷金融港" }, },
{ lnglat: [114.433, 30.504], name: "武汉东站" } {
] lnglat: [114.428, 30.476],
wuhanPoints.forEach(point => { name: "光谷金融港"
this.addMarker(point.lnglat, point.name) },
}) {
}) lnglat: [114.433, 30.504],
name: "武汉东站"
}
]
wuhanPoints.forEach(point => {
this.addMarker(point.lnglat, point.name)
})
})
// 创建自定义弹窗
this.createCustomPopup()
} catch (e) {
console.error('初始化失败:', e)
this.$ownerInstance.callMethod('hideLoading')
}
},
// 创建自定义弹窗 createCustomPopup() {
this.createCustomPopup() this.customPopup = document.createElement('div')
this.customPopup.className = 'custom-map-popup'
} catch (e) { this.customPopup.innerHTML = `
console.error('初始化失败:', e)
this.$ownerInstance.callMethod('hideLoading')
}
},
createCustomPopup() {
this.customPopup = document.createElement('div')
this.customPopup.className = 'custom-map-popup'
this.customPopup.innerHTML = `
<div class="popup-content"> <div class="popup-content">
<div class="popup-title"></div> <div class="popup-title"></div>
</div> </div>
` `
this.customPopup.style.display = 'none' this.customPopup.style.display = 'none'
document.getElementById('amapContainer').appendChild(this.customPopup) document.getElementById('amapContainer').appendChild(this.customPopup)
}, },
addMarker(position, title) { addMarker(position, title) {
const marker = new AMap.Marker({ const marker = new AMap.Marker({
position: new AMap.LngLat(...position), position: new AMap.LngLat(...position),
map: this.map, map: this.map,
icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png', icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png',
}) })
marker.on('click', () => {
marker.on('click', () => { this.showCustomPopup(position, title)
this.showCustomPopup(position, title) })
}) this.markers.push(marker)
return marker
this.markers.push(marker) },
return marker
},
showCustomPopup(position, title) { showCustomPopup(position, title) {
const pixel = this.map.lngLatToContainer(position) const pixel = this.map.lngLatToContainer(position)
this.customPopup.querySelector('.popup-title').textContent = title this.customPopup.querySelector('.popup-title').textContent = title
this.customPopup.style.display = 'block' this.customPopup.style.display = 'block'
this.customPopup.style.left = `${pixel.x}px` this.customPopup.style.left = `${pixel.x}px`
this.customPopup.style.top = `${pixel.y}px` this.customPopup.style.top = `${pixel.y}px`
this.map.on('click', this.hideCustomPopup)
this.map.on('click', this.hideCustomPopup) },
},
hideCustomPopup() { hideCustomPopup() {
if (this.customPopup) { if (this.customPopup) {
this.customPopup.style.display = 'none' this.customPopup.style.display = 'none'
} }
this.map.off('click', this.hideCustomPopup) this.map.off('click', this.hideCustomPopup)
} }
}, },
onLoad(options) { onLoad(options) {
const eventChannel = this.getOpenerEventChannel(); console.log(options,'optionsoptions');
// 监听 'detailData' 事件，获取传过来的数据 const eventChannel = this.getOpenerEventChannel();
eventChannel.on('MapData', (data) => { eventChannel.on('MapData', (data) => {
console.log(data,'data'); console.log(data, 'data');
}) })
}
} }
}
</script> </script>
<style> <style>
/* 基础样式 */ /* 基础样式 */
.map-container { .map-container {
width: 100%; width: 100%;
height: 100vh; height: 100vh;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
} }
.map-background { .map-background {
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 100%; height: 100%;
background: #121212; background: #121212;
z-index: 1; z-index: 1;
} }
.map-wrapper { .map-wrapper {
width: 100%; width: 100%;
height: 100%; height: 100%;
position: relative; position: relative;
z-index: 2; z-index: 2;
} }
/* 加载提示 */ /* 加载提示 */
.loading-mask { .loading-mask {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
background: #121212; background: #121212;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
z-index: 999; z-index: 999;
} }
.loading-content { .loading-content {
color: rgba(255,255,255,0.9); color: rgba(255, 255, 255, 0.9);
font-size: 16px; font-size: 16px;
padding: 12px 24px; padding: 12px 24px;
background: rgba(0,0,0,0.7); background: rgba(0, 0, 0, 0.7);
border-radius: 8px; border-radius: 8px;
} }
/* 弹窗样式 */ /* 弹窗样式 */
.custom-map-popup { .custom-map-popup {
position: absolute; position: absolute;
z-index: 9999; z-index: 9999;
transform: translate(-50%, -100%); transform: translate(-50%, -100%);
min-width: 200rpx; min-width: 200rpx;
pointer-events: none; pointer-events: none;
animation: popupFadeIn 0.3s ease-out; animation: popupFadeIn 0.3s ease-out;
} }
.popup-content { .popup-content {
background: rgba(18,45,74,0.95); background: rgba(18, 45, 74, 0.95);
border-radius: 16rpx; border-radius: 16rpx;
padding: 12rpx 24rpx; padding: 12rpx 24rpx;
color: #fff; color: #fff;
font-size: 14px; font-size: 14px;
text-align: center; text-align: center;
box-shadow: 0 4px 12px rgba(0,0,0,0.2); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
border: 1px solid rgba(255,255,255,0.1); border: 1px solid rgba(255, 255, 255, 0.1);
} }
.popup-content:after { .popup-content:after {
content: ''; content: '';
position: absolute; position: absolute;
bottom: -8px; bottom: -8px;
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
border-width: 8px 8px 0; border-width: 8px 8px 0;
border-style: solid; border-style: solid;
border-color: rgba(18,45,74,0.95) transparent transparent; border-color: rgba(18, 45, 74, 0.95) transparent transparent;
} }
@keyframes popupFadeIn { @keyframes popupFadeIn {
from { opacity: 0; transform: translate(-50%, -90%); } from {
to { opacity: 1; transform: translate(-50%, -100%); } opacity: 0;
} transform: translate(-50%, -90%);
}
to {
opacity: 1;
transform: translate(-50%, -100%);
}
}
</style> </style>