You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
357 lines
10 KiB
357 lines
10 KiB
<template>
|
|
<div class="container">
|
|
<el-amap ref="map" :center="center" :zoom="zoom" :zooms="zooms" element-loading-background="rgba(11, 34, 72, 0.8)"
|
|
@init="init" :extra-options="{ vectorMapForeign: 'style_zh_cn' }" class="amap-demo">
|
|
<el-amap-geojson :geo="changshazhen" :polygon-options="polygonOptions" :draggable="draggable"
|
|
@click="JSONclick" />
|
|
<el-amap-marker v-for="(marker, index) in markers" :title="marker.name" :key="marker.id"
|
|
:position="marker.position" @click="(e) => { clickArrayMarker(marker, e) }">
|
|
<div class="markerStyles">
|
|
<div v-if="marker.name" class="marker-Text">{{ marker.name }}</div>
|
|
<img :src="marker.imgSrc" alt="">
|
|
</div>
|
|
</el-amap-marker>
|
|
|
|
<el-amap-info-window v-if="personInfo.visible" anchor="bottom-center" :offset="[30, 0]" :closeWhenClickMap="true"
|
|
:position="personInfo.position" :visible.sync="personInfo.visible" :zIndex="900">
|
|
<div class="infowindow-box" v-if="titleShow == '人员'">
|
|
<div class="infowindow-box-title">
|
|
<div>人员信息:</div><img src="@/assets/images/icon/cuohao.png" class="mask" @click="markersClosePopup" alt="" />
|
|
</div>
|
|
<div class="infowindow-box-item">
|
|
<div class="isisbox">
|
|
<div>姓名:</div><span>张三</span>
|
|
</div>
|
|
<div class="isisbox">
|
|
<div>部门:</div><span>xxx</span>
|
|
</div>
|
|
<div class="isisbox">
|
|
<div>联系方式:</div><span>13611111111</span>
|
|
</div>
|
|
<div class="isisbox">
|
|
<div>当前位置:</div><span>xxxxxx</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="infowindow-box" v-if="titleShow == '车辆'">
|
|
<div class="infowindow-box-title">
|
|
<div>车辆信息:</div><img src="@/assets/images/icon/cuohao.png" class="mask" @click="markersClosePopup" alt="" />
|
|
</div>
|
|
<div class="infowindow-box-item infowindow-box-itemTow">
|
|
<div class="isisbox">
|
|
<div>驾驶员姓名:</div><span>张三</span>
|
|
</div>
|
|
<div class="isisbox">
|
|
<div>联系方式:</div><span>xxx</span>
|
|
</div>
|
|
<div class="isisbox">
|
|
<div>车辆类型:</div><span>13611111111</span>
|
|
</div>
|
|
<div class="isisbox">
|
|
<div>车牌号:</div><span>xxxxxx</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-amap-info-window>
|
|
</el-amap>
|
|
<div class="dituzhadian" @click="loogshowCK">
|
|
<div>地图扎点</div>
|
|
<img src="@/assets/images/zhadian.png" alt="">
|
|
</div>
|
|
<div class="toptuli">
|
|
<div>
|
|
图例
|
|
</div>
|
|
<div class="zuoyou">
|
|
<img src="@/assets/images/icon/A-jianguanrenyuan.png" alt="">
|
|
<div>人员</div>
|
|
</div>
|
|
<div class="zuoyou">
|
|
<img src="@/assets/images/icon/A-cheliang.png" alt="">
|
|
<div>车辆</div>
|
|
</div>
|
|
</div>
|
|
|
|
<el-dialog :visible.sync="showCK" width="40%" title="地图扎点" @close="close" :close-on-click-modal="false"
|
|
:close-on-press-escape="false">
|
|
<div class="diandian">
|
|
<el-radio v-model="radio" label="1">人员扎点</el-radio>
|
|
<el-radio v-model="radio" label="2">车辆扎点</el-radio>
|
|
</div>
|
|
<div v-if="radio == 1">
|
|
<el-form ref="form" :model="form" :rules="rules" label-width="120px" :disabled="mytitle == '查看人员'">
|
|
<el-form-item label="姓名" size="mini" prop="xm">
|
|
<el-input v-model="form.xm" placeholder="请输入"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="部门" prop="xb">
|
|
<el-select v-model="form.xb" multiple placeholder="请选择" size="mini">
|
|
<el-option v-for="item in options" :key="item.value" :label="item.groupName" :value="item.id">
|
|
</el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="联系方式" size="mini" prop="sfzh">
|
|
<el-input v-model="form.sfzh" placeholder="请输入"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="职责描述" size="mini" prop="zz">
|
|
<el-input v-model="form.zz" placeholder="请输入"></el-input>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="社会关系" prop="shgx">
|
|
<el-input type="textarea" resize="none" :rows="5" v-model="form.shgx" placeholder="请输入"></el-input>
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
<div v-if="radio == 2">
|
|
<el-form ref="form" :model="form" :rules="rules" label-width="120px" :disabled="mytitle == '查看人员'">
|
|
<el-form-item label="驾驶员姓名" size="mini" prop="xm1">
|
|
<el-input v-model="form.xm1" placeholder="请输入"></el-input>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="联系方式" size="mini" prop="lxfs1">
|
|
<el-input v-model="form.lxfs1" placeholder="请输入"></el-input>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="车辆类型" size="mini" prop="sfzha">
|
|
<el-input v-model="form.sfzha" placeholder="请输入"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="车牌号" size="mini" prop="zz1">
|
|
<el-input v-model="form.zz1" placeholder="请输入"></el-input>
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
|
|
<span slot="footer" class="dialog-footer" v-show="mytitle != '查看人员'">
|
|
<el-button size="mini" icon="el-icon-refresh-left" @click="reset('form')">重置</el-button>
|
|
<el-button size="mini" type="primary" icon="el-icon-document" @click="save('form')">保存</el-button>
|
|
</span>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import changshazhen from "@/assets/mapjson/Chaangshazhen/changshazhen.geojson"
|
|
|
|
export default {
|
|
name: '',
|
|
components: {},
|
|
data() {
|
|
return {
|
|
mytitle: "地图扎点",
|
|
zoom: 11.8,
|
|
zooms: [3, 20],
|
|
center: [121.298563, 32.451807],
|
|
map: null,
|
|
draggable: false,
|
|
visible: true,
|
|
radio: "1",
|
|
changshazhen: changshazhen,
|
|
polygonOptions: {
|
|
strokeColor: '#00C5EC',
|
|
fillColor: '#00AEFF'
|
|
},
|
|
options: [],
|
|
form: {
|
|
|
|
},
|
|
showCK: false,
|
|
rules: {
|
|
|
|
},
|
|
personInfo: {
|
|
position: [],
|
|
info: {},
|
|
visible: false,
|
|
},
|
|
titleShow: "人员",
|
|
markers: [
|
|
{
|
|
position: [121.183697866903292, 32.460227941215508],
|
|
id: 1,
|
|
name: "人员",
|
|
content: '<i class="el-icon-user-solid bendiren"></i>',
|
|
imgSrc: require("@/assets/images/icon/A-jianguanrenyuan.png")
|
|
},
|
|
{
|
|
position: [121.235712627230569, 32.447218823220901],
|
|
id: 2,
|
|
name: "车辆",
|
|
content: '<i class="el-icon-user-solid bendiren"></i>',
|
|
imgSrc: require("@/assets/images/icon/A-cheliang.png")
|
|
},
|
|
{
|
|
position: [121.318413448767714, 32.411908360092688],
|
|
id: 3,
|
|
name: "车辆",
|
|
content: '<i class="el-icon-user-solid bendiren"></i>',
|
|
imgSrc: require("@/assets/images/icon/A-cheliang.png")
|
|
},
|
|
{
|
|
position: [121.359751265879749, 32.39683020264299],
|
|
id: 4,
|
|
name: "人员",
|
|
content: '<i class="el-icon-user-solid bendiren"></i>',
|
|
imgSrc: require("@/assets/images/icon/A-jianguanrenyuan.png")
|
|
},
|
|
],
|
|
}
|
|
},
|
|
created() { },
|
|
mounted() { },
|
|
methods: {
|
|
markersClosePopup(){
|
|
this.personInfo.visible = false
|
|
|
|
},
|
|
getMap() {
|
|
// bmap vue component
|
|
console.log('$refs: ', this.$refs.map.$$getInstance())
|
|
},
|
|
init(map) {
|
|
this.map = map;
|
|
// o.setMapStyle('amap://styles/darkblue')
|
|
console.log(this.map.getCenter())
|
|
console.log(this.$refs.map.$$getInstance())
|
|
},
|
|
// 地图点击事件
|
|
click() {
|
|
alert('click map')
|
|
},
|
|
JSONclick() { },
|
|
clickArrayMarker(e) {
|
|
this.personInfo.visible = true
|
|
this.personInfo.position = e.position
|
|
this.personInfo.info = {}
|
|
this.titleShow = e.name
|
|
|
|
},
|
|
close() {
|
|
this.form = {
|
|
|
|
}
|
|
this.showCK = false;
|
|
},
|
|
loogshowCK() {
|
|
this.showCK = true;
|
|
|
|
},
|
|
|
|
},
|
|
computed: {}
|
|
}
|
|
</script>
|
|
<style scoped lang='scss'>
|
|
.container {
|
|
position: relative;
|
|
|
|
.dituzhadian {
|
|
top: 10px;
|
|
left: 10px;
|
|
cursor: pointer;
|
|
position: absolute;
|
|
width: 120px;
|
|
height: 50px;
|
|
color: #000000;
|
|
background: #ffffff;
|
|
border-radius: 5px;
|
|
font-family: 'Source Han Sans CN--Bold';
|
|
font-size: 16px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
img {
|
|
width: 30px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.toptuli {
|
|
top: 10px;
|
|
right: 10px;
|
|
cursor: pointer;
|
|
position: absolute;
|
|
width: 120px;
|
|
color: #000000;
|
|
background: #ffffff;
|
|
border-radius: 5px;
|
|
font-family: 'Source Han Sans CN--Bold';
|
|
font-size: 16px;
|
|
padding: 10px;
|
|
|
|
.zuoyou {
|
|
display: flex;
|
|
align-items: center;
|
|
margin: 10px 0;
|
|
|
|
img {
|
|
width: 30px;
|
|
margin-right: 10px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.diandian {
|
|
width: 100%;
|
|
margin: 15px 0;
|
|
margin-left: 100px;
|
|
|
|
|
|
}
|
|
|
|
.infowindow-box {
|
|
width: 300px;
|
|
min-height: 100px;
|
|
color: #000000;
|
|
font-family: 'Source Han Sans CN--Bold';
|
|
background: #fff;
|
|
|
|
.infowindow-box-title {
|
|
width: 100%;
|
|
padding: 5px 10px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
font-size: 16px;
|
|
border-bottom: 1px solid #ccc;
|
|
|
|
img {
|
|
width: 15px;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
.infowindow-box-item {
|
|
padding: 20px;
|
|
|
|
.isisbox {
|
|
margin: 10px 0;
|
|
display: grid;
|
|
grid-template-columns: 25% 70%;
|
|
|
|
div {
|
|
font-size: 14px;
|
|
text-align: right;
|
|
|
|
|
|
}
|
|
|
|
span {
|
|
font-size: 12px;
|
|
color: #4b4848;
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
.infowindow-box-itemTow {
|
|
.isisbox {
|
|
display: grid;
|
|
grid-template-columns: 30% 70%;
|
|
|
|
|
|
}
|
|
}
|
|
}
|
|
</style>
|