高德地图_平台服务效果
一、实现效果
- 高德地图展示，多个标记点在地图上的展示
- 点击标记点显示信息窗体，同一时间地图上只展示一个信息窗体，再次点击关闭该标记点
- 右侧表格自动轮播信息，鼠标移动到上面停止滚动，移出继续滚动
二、完整代码展示
<template>
<el-main style="padding: 0;">
<div id="amapcontainer" style="width: 90vw; height:85vh;position: relative;">
<div class="input-card"
style="position: absolute; top: 10px; right: 3vw; z-index: 1000;background-color: white;">
<el-table ref="scrollTable" :data="tableData" style="width: 100%" height="250"
:default-sort="{prop: 'date', order: 'descending'}" @row-click="handleRowClick">
<el-table-column sortable prop="date" label="报警时间" width="120">
</el-table-column>
<el-table-column prop="city" label="报警类型" width="100">
</el-table-column>
<el-table-column :sort-method="sortAlarmLevel" prop="province" label="报警等级" width="80">
</el-table-column>
<el-table-column prop="name" label="报警人" width="80">
</el-table-column>
</el-table>
</div>
</div>
</el-main>
</template>
<script>
import AMapLoader from '@amap/amap-jsapi-loader';
import {
MessageBox
} from 'element-ui';
window._AMapSecurityConfig = {
securityJsCode: '7e34e780be8c7046d0d805755ebd1be0'
};
export default {
data() {
return {
map: null,
markers: [],
infoWindow: null,
openMarker: null,
scrollInterval: null,
scrollTop: 0,
tableData: [
{date: '2016-05-03', name: '王小虎', province: '中', city: '低电量', address: '上海市普陀区金沙江路 1518 弄', zip: 200333},
{date: '2016-05-02', name: '王小虎', province: '中', city: '跌落', address: '上海市普陀区金沙江路 1518 弄', zip: 200333},
{date: '2016-05-04', name: '王小虎', province: '高', city: '丢失', address: '上海市普陀区金沙江路 1518 弃', zip: 200333},
{date: '2016-05-01', name: '王小虎', province: '低', city: '普陀区', address: '上海市普陀区金沙江路 1518 弄', zip: 200333},
{date: '2016-05-04', name: '王小虎', province: '高', city: '丢失', address: '上海市普陀区金沙江路 1518 弃', zip: 200333},
{date: '2016-05-01', name: '王小虎', province: '低', city: '普陀区', address: '上海市普陀区金沙江路 1518 弃', zip: 200333}
]
}
},
mounted() {
this.initAMap();
this.startScroll();
},
methods: {
sortAlarmLevel(a, b) {
const levels = ['高', '中', '低'];
const indexA = levels.indexOf(a);
const indexB = levels.indexOf(b);
if (indexA === -1) return 1;
if (indexB === -1) return -1;
return indexA - indexB;
},
initAMap() {
AMapLoader.load({
key: "81208a6c878ab9e78bfa0eac0e5eb16d",
version: "2.0",
plugins: ["AMap.Scale", "AMap.ToolBar", "AMap.ControlBar", 'AMap.Geocoder', 'AMap.Marker', 'AMap.CitySearch', 'AMap.Geolocation', 'AMap.AutoComplete', 'AMap.InfoWindow']
}).then((AMap) => {
this.map = new AMap.Map("amapcontainer", {
resizeEnable: true,
zoom: this.zoom,
viewMode: "3D",
zoomEnable: true,
dragEnable: true,
doubleClickZoom: true,
zoom: 11,
center: [117.227000, 31.820301]
});
const markerData = [{
position: [117.243952, 31.858556],
content: 'HELLO, ZHYL!',
dynamicImagePath: require('@/assets/moren.jpeg'),
name: '张三',
ZT: '离线',
TW: '37.1',
BS: '5000',
DL: '60',
XL: '80',
XY: '120/80',
XYY: '96',
SM: '深睡',
FWY: '张四',
FWYTEL: '13888888888'
}, {
position: [117.267456, 31.860184],
content: 'HELLO, ANOTHER!',
dynamicImagePath: require('@/assets/orange.jpeg'),
name: '李四',
ZT: '在线',
TW: '37.3',
BS: '6000',
DL: '62',
XL: '90',
XY: '120/85',
XYY: '96',
SM: '浅睡',
FWY: '赵五',
FWYTEL: '138887818888'
}];
this.infoWindow = new AMap.InfoWindow({
isCustom: true,
offset: new AMap.Pixel(0, -45),
});
markerData.forEach(data => {
let marker = new AMap.Marker({
position: data.position,
});
this.map.add(marker);
this.markers.push(marker);
marker.on("click", (e) => {
if (this.openMarker === marker) {
this.infoWindow.close();
this.openMarker = null;
} else {
this.infoWindow.setContent(`
<div style="background-color: white;padding:10px;">
<div style="display: flex;">
<div style="flex:0.3;display: flex;flex-direction: column;align-items:center">
<img style="width:80px;height:80px" src="${data.dynamicImagePath}" alt="路径错误" />
<span>${data.name}</span>
<span style="color: greenyellow;">【${data.ZT}】</span>
</div>
<div style="flex:0.7">
<div>
<span>体温(°C):${data.TW}</span>
<span style="padding-left: 20px;">步数:${data.BS}</span>
<span style="padding-left: 20px;">电量(%):${data.DL}</span>
</div>
<div>
<span>心率(次/分):${data.XL}</span>
<span style="padding-left:20px;">血压(mmHg):${data.XY}</span>
</div>
<div>
<span>血氧(%):${data.XYY}</span>
<span style="padding-left: 20px;">当前睡眠状态:${data.SM}</span>
</div>
</div>
</div>
<div style="display: flex;justify-content: space-between;">
<span>关联服务人员姓名：${data.FWY}</span>
<span style="padding-left: 20px;">关联服务人员联系号码：${data.FWYTEL}</span>
</div>
</div>`);
this.infoWindow.open(this.map, e.target.getPosition());
this.openMarker = marker;
}
});
});
}).catch(e => {
console.log(e)
})
},
startScroll() {
const tableWrapper = this.$refs.scrollTable.$el.querySelector('.el-table__body-wrapper');
const tableBody = tableWrapper.querySelector('tbody');
const scroll = () => {
this.scrollTop += 1;
if (this.scrollTop >= tableBody.scrollHeight - tableWrapper.clientHeight) {
this.scrollTop = 0;
}
tableWrapper.scrollTop = this.scrollTop;
};
this.scrollInterval = setInterval(scroll, 50);
tableWrapper.addEventListener('mouseenter', this.stopScroll);
tableWrapper.addEventListener('mouseleave', this.resumeScroll);
},
stopScroll() {
if (this.scrollInterval) {
clearInterval(this.scrollInterval);
this.scrollInterval = null;
}
},
resumeScroll() {
if (!this.scrollInterval) {
this.startScroll();
}
},
handleRowClick(row, column, event) {
MessageBox.alert(`行被点击了: ${row.name}, ${row.date}`, '行点击提示', {
confirmButtonText: '确定',
type: 'info'
});
}
}
};
</script>
<style scoped>
/* 隐藏滚动条但保持滚动功能 */
.el-table__body-wrapper::-webkit-scrollbar {
width: 0;
height: 0;
}
::v-deep .el-table--scrollable-y .el-table__body-wrapper {
overflow-y: hidden;
}
.el-table__body-wrapper {
-ms-overflow-style: none;
/* IE 和 Edge */
scrollbar-width: none;
/* Firefox */
}
.el-header {
margin-top: 10px;
background-color: #ffffff;
color: #333;
display: flex;
justify-content: flex-start;
align-items: center;
padding: 0 20px;
height: 80px;
}
.header-content {
height: 100%;
display: flex;
align-items: center;
width: 100%;
}
.el-form--inline {
display: flex;
}
.el-form--inline .el-form-item {
display: flex;
align-items: center;
margin-top: 20px;
margin-right: 20px;
}
.el-main {
margin-top: 10px;
background-color: #ffffff;
padding: 0px 20px;
overflow: auto;
display: flex;
flex-direction: column;
}
.main-content {
flex: 1;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.table-wrapper {
flex: 1;
display: flex;
flex-direction: column;
justify-content: flex-start;
margin-bottom: 20px;
}
.el-footer {
height: 60px;
display: flex;
align-items: center;
justify-content: flex-end;
padding: 0 20px;
background-color: #fff;
}
.main-header {
display: flex;
justify-content: flex-start;
align-items: center;
padding: 10px 0;
}
.short-input .el-input__inner,
.short-input .el-select,
.short-input .el-date-picker__editor {
width: 300px;
}
.drawer-form .drawer-input .el-input__inner,
.drawer-form .drawer-input .el-select .el-input__inner,
.drawer-form .el-date-picker__editor .el-input__inner {
width: 500px !important;
/* 设置抽屉内输入框的宽度 */
}
.drawer-form .el-select .el-input__inner {
width: 480px;
/* 调整下拉框箭头的位置 */
}
.drawer-footer {
text-align: right;
padding: 10px;
background: #f5f5f5;
position: absolute;
bottom: 0;
width: 100%;
}
.avatar-table {
width: 40px;
height: 40px;
border-radius: 50%;
}
</style>
