#container {
/* width: 100%;
height: 100%; */
position: relative;
/* left: 50%;
top: 50%; */
/* transform: translate3d(-50%, -50%, 0); */
}
.search-box {
position: relative;
width: 100%;
}
.intro {
width: 40%;
max-height: 260px;
position: absolute;
right: 13%;
top: 30px;
background-color: rgba(255, 255, 255, 0.8);
}
.prompt {
padding: 1rem;
background: white;
width: auto;
height: auto;
text-align: left;
}
学校数量
{{school_num}}
食堂总量
{{canteen_num_inuse}}
在用食堂数
{{canteen_num_inuse}}
工勤人员总数
{{people}}
// eslint-disable-next-line
import AMap from "AMap";
// var map;
export default {
props:{
canteen_num: {
type: [String, Number, Array],
default: String,
},//餐厅总量
canteen_num_inuse: {
type: [String, Number, Array],
default: String,
},//启用餐厅总量
people: {
type: [String, Number, Array],
default: String,
},//工勤人员数量
school_num: {
type: [String, Number, Array],
default: String,
},//学校总量
allcanteens: { //初始化地图层级
type: [String, Number, Array],
default: Array,
},
allschools: { //初始化地图层级
type: [String, Number, Array],
default: Array,
},
},
name: "Index",
watch: {
allschools(val) { //监听学校数据
this.init();
},
},
data() {
return {
map:null,
infoWindow:null,
};
},
mounted() {
this.init();
},
methods: {
init() {
let self=this;
console.log(self.list)
//初始化地图
var map = new AMap.Map("container", {viewMode: '3D',resizeEnable: true,zoom: 10});
var allschools = self.allschools;
var allcanteens = self.allcanteens;
//初始化信窗-显示位置
var infoWindow = new AMap.InfoWindow({offset: new AMap.Pixel(0, -30)});
//学校数据通过文本标记显示
for (var i = 0; i < allschools.length; i++) {
// 文本标记显示内容
var text = new AMap.Text({
text:`
${ allschools[i].name }
${ allschools[i].canteens?allschools[i].canteens:'' }
anchor:'center', // 设置文本标记锚点
draggable:true,
cursor:'pointer',
angle:0,
style:{
'padding': '2rem',
'border-radius': '50%',
'background-color': 'rgba(255, 240, 9, 0.6)',
'width': '10rem',
'height': '10rem',
'border-width': 0,
'text-align': 'center',
'font-size': '1rem',
'color': 'blue'
},
position: allschools[i].position
});
//通过data保存/添加组织机构数据
text.data={
orgId:allschools[i].porgId?allschools[i].porgId:allschools[i].orgId,
schoolId:allschools[i].schoolId?allschools[i].schoolId:allschools[i].thisId,
canteenId:allschools[i].porgId?'':allschools[i].thisId,
}
text.setMap(map);
//学校信息窗展示数据
text.content = `
学校名称:${ allschools[i].name }
学校地址:${ allschools[i].address }
联系人:${ allschools[i].contacts?allschools[i].contacts:'' }
联系电话:${ allschools[i].phone?allschools[i].phone:'' }
食堂数量:${ allschools[i].canteens?allschools[i].canteens:'' }
工勤人员数量:${ allschools[i].workers?allschools[i].workers:'' }
//通过点击显示学校信息窗数据
text.on('click', markerClick);
// text.on('mouseout', marker.setLabel({}));
}
//食堂数据通过标记点显示
for (var i = 0, marker; i < allcanteens.length; i++) {
//地图标记点
var marker = new AMap.Marker({
position: allcanteens[i].position,
map: map
});
//通过data保存/添加组织机构数据
marker.data={
orgId:allcanteens[i].porgId?allcanteens[i].porgId:allcanteens[i].orgId,
schoolId:allcanteens[i].schoolId?allcanteens[i].schoolId:allcanteens[i].thisId,
canteenId:allcanteens[i].porgId?'':allcanteens[i].thisId,
}
//食堂信息窗展示数据
marker.content = `
食堂名称:${ allcanteens[i].name }
食堂地址:${ allcanteens[i].address }
联系人:${ allcanteens[i].contacts?allcanteens[i].contacts:'' }
联系电话:${ allcanteens[i].phone?allcanteens[i].phone:'' }
工勤人员数量:${ allcanteens[i].workers?allcanteens[i].workers:'' }
//通过鼠标移动上标记点显示信息窗
marker.on('mouseover', markerClick);
//点击调取父级方法跳转
marker.on('click',self.handler);
// marker.emit('mouseout', {target: marker});
}
//信息窗实例化方法
function markerClick(e) {
infoWindow.setContent(e.target.content);
infoWindow.open(map, e.target.getPosition());
}
// map.setFitView();
},
//回调父级方法传参
handler(val){
this.$emit('handlerJump', val.target.data)
}
},
};