常规小优化
This commit is contained in:
liub
280
pages/common/map/index.nvue
Normal file
280
pages/common/map/index.nvue
Normal file
@ -0,0 +1,280 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<map class="map" :latitude="latitude" :longitude="longitude" :markers="covers" @markertap="onMarkerTap"
|
||||
:scale="16"></map>
|
||||
|
||||
<!-- 加载提示 -->
|
||||
<view v-if="loading" class="loading-mask">
|
||||
<view class="loading-content">加载中...</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Common from "@/utils/Common.js";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
latitude: 39.909,
|
||||
longitude: 116.39742,
|
||||
covers: [],
|
||||
loading: true,
|
||||
markerData: [],
|
||||
clickMarker: {
|
||||
"deviceId": "",
|
||||
"deviceName": "",
|
||||
"deviceImei": "",
|
||||
"deviceMac": "",
|
||||
"communicationMode": null,
|
||||
"devicePic": "",
|
||||
"typeName": "",
|
||||
"bluetoothName": "",
|
||||
"deviceStatus": 1,
|
||||
"personnelInfo": null,
|
||||
"sendMsg": null,
|
||||
"mainLightMode": null,
|
||||
"laserLightMode": "",
|
||||
"batteryPercentage": "",
|
||||
"chargeState": "0",
|
||||
"batteryRemainingTime": "0",
|
||||
"onlineStatus": 0,
|
||||
"longitude": "",
|
||||
"latitude": "",
|
||||
"address": "",
|
||||
"alarmStatus": null,
|
||||
"lightBrightness": null
|
||||
},
|
||||
Status: {
|
||||
BottomMenu: {
|
||||
show: false,
|
||||
showHeader: true,
|
||||
menuItems: [{
|
||||
text: '高德地图',
|
||||
value: 'amap',
|
||||
icon: ''
|
||||
},
|
||||
{
|
||||
text: '百度地图',
|
||||
value: 'baidumap',
|
||||
icon: ''
|
||||
}
|
||||
],
|
||||
activeIndex: -1,
|
||||
bgColor: '#2a2a2a',
|
||||
itemBgColor: '#3a3a3a',
|
||||
textColor: '#ffffffde',
|
||||
textAlign: 'flex-start',
|
||||
title: '选择导航',
|
||||
showDivider: false,
|
||||
dividerColor: '#00000000',
|
||||
dividerThickness: '0rpx',
|
||||
dividerMargin: '10rpx',
|
||||
itemHeight: '80rpx',
|
||||
type: '',
|
||||
showBtn: false,
|
||||
btnBgColor: "#bbe600",
|
||||
btnText: "确定",
|
||||
btnTextColor: "#232323de",
|
||||
showMask: true,
|
||||
maskBgColor: '#00000066',
|
||||
showClose: false
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
const eventChannel = this.getOpenerEventChannel();
|
||||
eventChannel.on('Map', (receivedData) => {
|
||||
console.log("地图页收到数据",receivedData);
|
||||
this.loading = true;
|
||||
this.covers = [];
|
||||
const dataContent = receivedData.data;
|
||||
|
||||
if (Array.isArray(dataContent)) {
|
||||
const validDevices = dataContent.filter(device =>
|
||||
device.latitude && device.longitude &&
|
||||
device.latitude !== '' && device.longitude !== ''
|
||||
);
|
||||
this.markerData = validDevices;
|
||||
if (validDevices.length > 0) {
|
||||
this.processMultipleMarkers(validDevices);
|
||||
} else {
|
||||
console.log('无有效经纬度');
|
||||
this.loading = false;
|
||||
}
|
||||
} else if (typeof dataContent === 'object' && dataContent !== null) {
|
||||
if (this.validateMarker(dataContent)) {
|
||||
this.markerData = [dataContent];
|
||||
this.processSingleMarker(dataContent);
|
||||
} else {
|
||||
console.log('经纬度无效');
|
||||
this.loading = false;
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
showAction() {
|
||||
|
||||
let gd=plus.runtime.isApplicationExist({
|
||||
pname: 'com.autonavi.minimap', // 安卓高德包名
|
||||
action: 'iosamap://' // iOS高德 Scheme
|
||||
});
|
||||
|
||||
let bd= plus.runtime.isApplicationExist({
|
||||
pname: 'com.baidu.BaiduMap', // 安卓百度包名
|
||||
action: 'baidumap://' // iOS百度 Scheme
|
||||
});
|
||||
let list=[];
|
||||
let gdStr='高德地图';
|
||||
let bdStr='百度地图';
|
||||
console.log("gd=",gd);
|
||||
console.log("bd=",bd);
|
||||
list=[gdStr,bdStr];
|
||||
uni.showActionSheet({
|
||||
title: '选择地图',
|
||||
|
||||
itemList:list ,
|
||||
success: (res)=> {
|
||||
let mapType = 'amap';
|
||||
if (res.tapIndex == 1) {
|
||||
mapType = 'baiduMap';
|
||||
if(!bd){
|
||||
uni.showToast({
|
||||
icon:"error",
|
||||
title:'未安装'+bdStr
|
||||
});
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
if(res.tapIndex==0 && !gd) {
|
||||
uni.showToast({
|
||||
icon:"error",
|
||||
title:'未安装'+gdStr
|
||||
})
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
let marker = this.clickMarker;
|
||||
Common.MapNavi(marker.longitude, marker.latitude, marker.address, mapType).catch(
|
||||
ex => {
|
||||
uni.showToast({
|
||||
icon: "error",
|
||||
title: '无法打开地图'
|
||||
});
|
||||
});
|
||||
|
||||
},
|
||||
})
|
||||
|
||||
},
|
||||
|
||||
navigatMap(e) {
|
||||
console.log("点位被点击,", e);
|
||||
},
|
||||
processSingleMarker(marker) {
|
||||
const lat = parseFloat(marker.latitude);
|
||||
const lng = parseFloat(marker.longitude);
|
||||
this.latitude = lat;
|
||||
this.longitude = lng;
|
||||
|
||||
this.covers = [{
|
||||
id: marker.id+"",
|
||||
latitude: lat,
|
||||
longitude: lng,
|
||||
iconPath: '/static/images/common/mapLocation.png',
|
||||
width: 30,
|
||||
height: 50,
|
||||
anchor: {
|
||||
x: 0.5,
|
||||
y: 0.5
|
||||
},
|
||||
callout: {
|
||||
content: marker.deviceName
|
||||
}
|
||||
}];
|
||||
|
||||
console.log("covers=",this.covers);
|
||||
this.loading = false;
|
||||
},
|
||||
|
||||
processMultipleMarkers(markers) {
|
||||
const first = markers[0];
|
||||
this.latitude = parseFloat(first.latitude);
|
||||
this.longitude = parseFloat(first.longitude);
|
||||
|
||||
this.covers = markers.map((marker, index) => ({
|
||||
id: marker.id+"",
|
||||
latitude: parseFloat(marker.latitude),
|
||||
longitude: parseFloat(marker.longitude),
|
||||
iconPath: '/static/images/common/mapLocation.png',
|
||||
width: 30,
|
||||
height: 50,
|
||||
anchor: {
|
||||
x: 0.5,
|
||||
y: 0.5
|
||||
},
|
||||
callout: {
|
||||
content: marker.deviceName
|
||||
}
|
||||
}));
|
||||
this.loading = false;
|
||||
},
|
||||
|
||||
validateMarker(marker) {
|
||||
const lat = parseFloat(marker.latitude);
|
||||
const lng = parseFloat(marker.longitude);
|
||||
return !isNaN(lat) && !isNaN(lng);
|
||||
},
|
||||
|
||||
onMarkerTap(e) {
|
||||
console.log('点击了标记', e);
|
||||
let marker = this.markerData.find(item => {
|
||||
return item.id == e.detail.markerId
|
||||
});
|
||||
console.log('点击了标记', marker);
|
||||
if (marker) {
|
||||
this.clickMarker = marker;
|
||||
this.showAction();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
/* nvue 全屏必须这样写 */
|
||||
.container {
|
||||
flex: 1;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.map {
|
||||
width: 750rpx;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.loading-mask {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.loading-content {
|
||||
color: #fff;
|
||||
font-size: 28rpx;
|
||||
padding: 20rpx 30rpx;
|
||||
background-color: rgba(0, 0, 0, 0.7);
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
</style>
|
||||
@ -79,16 +79,17 @@ export default {
|
||||
this.latitude = lat;
|
||||
this.longitude = lng;
|
||||
// 创建标记点
|
||||
console.log("devicePic=",marker)
|
||||
this.covers = [{
|
||||
id: marker.deviceImei, // 适配deviceId字段
|
||||
latitude: lat,
|
||||
longitude: lng,
|
||||
iconPath: marker.devicePic || '/static/images/common/mapLocation.png',
|
||||
width: 40,
|
||||
height: 40,
|
||||
iconPath: '/static/images/common/mapLocation.png',
|
||||
width: 60,
|
||||
height: 60,
|
||||
anchor: {x: 0.5, y: 0.5}, // 锚点在中心
|
||||
callout: {
|
||||
content: `ID: ${marker.deviceImei}`
|
||||
content: `${marker.deviceName}`
|
||||
}
|
||||
}];
|
||||
|
||||
@ -102,17 +103,18 @@ export default {
|
||||
this.latitude = parseFloat(firstMarker.latitude);
|
||||
this.longitude = parseFloat(firstMarker.longitude);
|
||||
|
||||
console.log("devicePic=",marker.devicePic)
|
||||
// 转换所有有效标记点
|
||||
this.covers = markers.map((marker, index) => ({
|
||||
id: marker.deviceId || marker.id || marker.deviceImei || index + 1,
|
||||
latitude: parseFloat(marker.latitude),
|
||||
longitude: parseFloat(marker.longitude),
|
||||
iconPath: marker.devicePic || '/static/images/common/device.png',
|
||||
width: 40,
|
||||
height: 40,
|
||||
iconPath: '/static/images/common/mapLocation.png',
|
||||
width: 60,
|
||||
height: 60,
|
||||
anchor: {x: 0.5, y: 0.5},
|
||||
callout: {
|
||||
content: `ID: ${marker.deviceImei}`,
|
||||
content: `${marker.deviceName}`,
|
||||
}
|
||||
}));
|
||||
|
||||
|
||||
Reference in New Issue
Block a user