|
|
<template>
|
|
|
<div>
|
|
|
<div class="map" id="map" :style="{'height':mapHeight+'px'}"></div>
|
|
|
<div ref='infoWindow' id="infoWindow">
|
|
|
<i @click='closeWin' class="el-icon-close"></i>
|
|
|
<div v-for="item in openData">
|
|
|
<p>名称：<span>{{item.mingcheng}}</span></p>
|
|
|
<p>队长：<span>{{item.duizhang?item.duizhang:''}}</span></p>
|
|
|
<p>联系电话：<span>{{item.lianxidianhua?item.lianxidianhua:''}}</span></p>
|
|
|
<p>人数：<span>{{item.renshu?item.renshu:''}}</span></p>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import {
|
|
|
index,
|
|
|
destroy
|
|
|
} from "@/api/system/baseForm.js"
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
zoom: 10,
|
|
|
center: [120.585294, 31.299758],
|
|
|
mapHeight: 0,
|
|
|
map: null,
|
|
|
makerList: [],
|
|
|
infoWindow: null,
|
|
|
openData: [],
|
|
|
mapList:[]
|
|
|
}
|
|
|
},
|
|
|
created() {
|
|
|
this.initHeight()
|
|
|
this.$nextTick(function() {
|
|
|
this.mapInit()
|
|
|
})
|
|
|
},
|
|
|
methods: {
|
|
|
initHeight() {
|
|
|
let winHeight = document.body.clientHeight
|
|
|
this.mapHeight = winHeight - 50 - 20
|
|
|
},
|
|
|
mapInit() {
|
|
|
this.map = new AMap.Map("map", {
|
|
|
center: this.center,
|
|
|
mapStyle: "amap://styles/bfb1bb3feb0db7082367abca96b8d214", // 设置地图的显示样式
|
|
|
zoom: this.zoom
|
|
|
});
|
|
|
this.infoWindow = new AMap.InfoWindow({
|
|
|
isCustom: true,
|
|
|
autoMove: true,
|
|
|
avoid: [20, 20, 20, 20],
|
|
|
content: this.$refs.infoWindow,
|
|
|
closeWhenClickMap: true,
|
|
|
offset: new AMap.Pixel(-10, -10)
|
|
|
})
|
|
|
this.getTeams()
|
|
|
console.log("map", this.map)
|
|
|
},
|
|
|
getTeams() {
|
|
|
index({
|
|
|
page: 1,
|
|
|
page_size: 9999,
|
|
|
table_name: 'teams'
|
|
|
}).then(res => {
|
|
|
let markers = []
|
|
|
if(res.data.length<1){
|
|
|
return
|
|
|
}
|
|
|
this.mapList = res.data
|
|
|
this.setMapMarker()
|
|
|
})
|
|
|
// this.list = res.data
|
|
|
|
|
|
},
|
|
|
// 增加点位
|
|
|
setMapMarker() {
|
|
|
var that = this
|
|
|
// console.log("123",m.jingdu, m.weidu)
|
|
|
// console.log('456',gcj02towgs84(m.jingdu, m.weidu))
|
|
|
that.map.remove(that.makerList)
|
|
|
that.makerList = []
|
|
|
// this.map.clearMap();
|
|
|
let list = this.mapList.map((m) => {
|
|
|
return {
|
|
|
id: m.id, //数据id
|
|
|
name: m.mingcheng, //数据名称
|
|
|
// reside: m.reside,
|
|
|
// lnglat: [m.lon, m.lat],//经纬度数据
|
|
|
lnglat: [m.jingdu, m.weidu], //这里我是转化一下，数据返回的是84坐标系需要转成高德坐标系否则会有偏差
|
|
|
style: 0, //渲染的样式下标，关联第一步创建的样式对象数组的数据
|
|
|
};
|
|
|
});
|
|
|
this.mapList.forEach((item, index) => {
|
|
|
// 遍历生成多个标记点
|
|
|
if (!item.jingdu || !item.weidu) {
|
|
|
|
|
|
return
|
|
|
}
|
|
|
let marker = new AMap.Text({
|
|
|
map: this.map,
|
|
|
text: item.mingcheng,
|
|
|
zIndex: 9999999,
|
|
|
offset: new AMap.Pixel(-13, -30),
|
|
|
position: [item.jingdu, item.weidu],
|
|
|
clickable: true,
|
|
|
extData: item.id,
|
|
|
style: {
|
|
|
'border': '1px solid red',
|
|
|
'padding': '0px 5px'
|
|
|
}
|
|
|
})
|
|
|
marker.on('click', (e) => {
|
|
|
this.openData = []
|
|
|
if (e.target.w.extData === item.id) {
|
|
|
this.openData.push(item)
|
|
|
}
|
|
|
this.infoWindow.open(this.map, e.target.getPosition())
|
|
|
}),
|
|
|
this.makerList.push(marker)
|
|
|
});
|
|
|
this.map.add(this.makerList)
|
|
|
},
|
|
|
closeWin() {
|
|
|
this.infoWindow.close()
|
|
|
},
|
|
|
},
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style>
|
|
|
#infoWindow {
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
#infoWindow>div {
|
|
|
background: #fff;
|
|
|
border: 1px solid red;
|
|
|
padding: 10px;
|
|
|
width: 180px;
|
|
|
}
|
|
|
|
|
|
/deep/ #infoWindow .el-icon-close {
|
|
|
position: absolute;
|
|
|
top: 5px;
|
|
|
right: 5px;
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
</style>
|
