由于uniapp自带的map地图组件，在h5下不太理想，所以使用高德的webjs的方式调用，这里使用的是uniapp的renderjs方式调用的高德地图
<template>
<view class="content">
<view :prop="markerList" class="allmap" :change:prop="amap.updateEcharts" id="amap">
</view>
<div class="info">
<div class="infoItem" :class="{active:active==0}">
<image style="width: 30rpx;height: 34rpx;" v-if="active==0" src="../../static/map/icon_x1_active.png">
</image>
<image style="width: 30rpx;height: 34rpx;" v-else src="../../static/map/icon_x1.png"></image>
<text>摄像机</text>
</div>
<div class="line"></div>
<nvr>
<div class="infoItem" :class="{active:active==1}">
<image style="width: 29rpx;height: 34rpx;" v-if="active==1"
src="../../static/map/icon_x2_active.png">
</image>
<image style="width: 29rpx;height: 34rpx;" v-else src="../../static/map/icon_x2.png"></image>
<text>NVR</text>
</div>
</nvr>
<div class="line"></div>
<getPopType>
<div class="infoItem" :class="{active:active==2}">
<image style="width: 34rpx;height: 34rpx;" v-if="active==2"
src="../../static/map/icon_x3_active.png">
</image>
<image style="width: 34rpx;height: 34rpx;" v-else src="../../static/map/icon_x3.png"></image>
<text>项目</text>
</div>
</getPopType>
</div>
<!-- <mappop></mappop> -->
</view>
</template>
<script>
import getPopType from '@/components/getPopType/getPopType.vue'
import nvr from './components/nvr.vue'
// import mappop from './components/mappop.vue'
import configs from '@/config/config.js'
import {
deptDeviceList
} from '@/config/api.js'
export default {
components: {
getPopType,
nvr
},
data() {
return {
latitude: 39.909,
longitude: 116.39742,
list: [],
active: 0,
covers: [],
markerList: [],
}
},
onload() {
let that = this;
},
mounted() {
var that = this;
this.getdata()
},
computed: {
deviceList: function() {
var list = []
this.list.forEach((type, index) => {
if (type.latitude) {
var data = {
latitude: type.latitude,
longitude: type.longitude,
iconPath: icon_x1,
width: 30,
height: 34,
id: index
}
this.latitude = type.latitude
this.longitude = type.longitude
list.push(data)
}
});
console.log(list)
return list
}
},
methods: {
//地图点击回调事件
onViewClick(params) {
// this.dataIndex = params.dataIndex
console.log(params)
// this.getcity()
},
getdata() {
var that = this;
deptDeviceList({
params: {
deptId: ''
},
custom: {
auth: true
}
}).then(res => {
if (res.data.code == 200) {
// that.list = res.data.data
var list = []
res.data.data.forEach((type) => {
type.devices.forEach((type2) => {
if (type2.deviceChannels[0].latitude) {
var data = {
deptName: type.deptName,
...type2.deviceChannels[0],
...type2.device,
}
list.push(data)
}
});
});
console.log(list)
console.log(111)
that.markerList = list
}
}).catch(err => {
})
},
}
}
</script>
<script module="amap" lang="renderjs">
import icon_x1 from '../../static/map/icon_x1_active.png'
import icon_x2 from '../../static/map/icon_x2.png'
import icon_x3 from '../../static/map/icon_x3.png'
import icon1 from '../../static/map/icon1.png'
import icon2 from '../../static/map/icon2.png'
import icon3 from '../../static/map/icon3.png'
import icon4 from '../../static/map/icon4.png'
export default {
data() {
return {
map: null,
longitude: '',
latitude: '',
address: '',
geoCoder: null,
ownerInstanceObj: null //service层对象
}
},
mounted() {
if (typeof window.AMap === 'function') {
this.initAmap()
} else {
// 动态引入较大类库避免影响页面展示
const script = document.createElement('script')
script.src = 'https://webapi.amap.com/maps?v=1.4.15&key=your key'
script.onload = this.initAmap.bind(this)
document.head.appendChild(script)
}
},
methods: {
getType(e) {
console.log(e)
var img = icon1
if (e == 1) {
img = icon1
} else if (e == 2) {
img = icon2
} else if (e == 3) {
img = icon3
} else if (e == 4) {
img = icon4
}
return img
},
initAmap() {
var that = this;
this.map = new AMap.Map('amap', {
resizeEnable: false,
center: ['116.39742', '39.909'],
layers: [ //使用多个图层
// new AMap.TileLayer.Satellite() //使用卫星图
],
zooms: [4, 18], //设置地图级别范围
zoom: 9
})
this.initMarkers()
},
//初始化标记点
initMarkers() {
var that = this;
let prevMarker = null
let prevIcon = null
this.markerList.forEach((item, index) => {
this.map.setZoomAndCenter(13, [item.longitude, item.latitude])
var marker = new AMap.Marker({
icon: new AMap.Icon({
image: this.getType(item.pTZType),
size: new AMap.Size(25, 30),
imageSize: new AMap.Size(25, 30),
}),
map: this.map,
position: [item.longitude, item.latitude],
extData: item,
})
marker.on('click', this.markerClick)
})
},
markerClick(e) {
console.log(e.target.w.extData)
var that = this;
var infoWindow = new AMap.InfoWindow({
anchor: 'middle-left',
content: `<view class="popWin" style="width: 200px;
background: #FFFFFF;
box-shadow: 0px 2px 5px 0px rgba(12, 39, 70, 0.16);
border-radius: 10px;">
<div class="popWinTitle" style="font-size: 14px;
font-family: PingFang;
font-weight: bold;
color: #333333;
padding-left: 10px;
padding-top: 12px;">${e.target.w.extData.deptName}</div>
<div class="popWinDesc" style="display: flex;
justify-content: flex-start;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
align-content: flex-start;
font-size: 12px;
font-family: PingFang;
font-weight: 500;
color: #333333;
padding-top: 8px;
padding-bottom: 10px;
margin-left: 10px;">``{e.target.w.extData.name}<text>``{e.target.w.extData.online?'（在线）':'（离线）'}</text></div>
<div class="popWinImg" style="width: 180px;
height: 110px;
background: #E4F0FE;
border-radius: 5px;
margin-left: 10px;
margin-bottom: 10px;">
<image style="width: 180px;
height: 110px;
border-radius: 5px;" src="../../../static/map/mapimg2.png"></image>
</div>
</view>`,
});
infoWindow.open(that.map, [e.lnglat.lng, e.lnglat.lat])
},
updateEcharts(newValue, oldValue, ownerInstance, instance) {
// 监听 service 层数据变更
this.ownerInstanceObj = ownerInstance
// this.initMarkers()
this.markerList.forEach((type, index) => {
this.initMarkers(type)
});
},
onClick(ownerInstance) {
// 调用 service 层的方法
ownerInstance.callMethod('onViewClick', {
dataIndex: this.dataIndex,
longitude: this.longitude,
latitude: this.latitude,
address: this.address,
})
}
}
}
</script>
<style lang="scss" scoped>
.content {
position: fixed;
width: 100%;
height: 100%;
}
.info {
position: fixed;
right: 30rpx;
top: 200rpx;
width: 100rpx;
height: 370rpx;
background: #FFFFFF;
box-shadow: 0px 0px 27rpx 0px #C1CDDB;
border-radius: 20rpx;
z-index: 10;
display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: nowrap;
flex-direction: column;
align-content: flex-start;
.line {
width: 40rpx;
height: 1rpx;
background: #C4D2E2;
flex-shrink: 0;
}
.infoItem {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: nowrap;
flex-direction: column;
align-content: flex-start;
text {
font-size: 22rpx;
font-family: PingFang;
font-weight: 500;
color: #666666;
margin-top: 10rpx;
}
image {
width: 30rpx;
height: 34rpx;
}
}
.infoItem.active {
text {
color: rgba(0, 121, 255, 1);
}
}
}
.allmap {
position: fixed;
width: 100%;
height: 100%;
}
</style>
