1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
| <template>
| <el-dialog
| :close-on-click-modal="false"
| :close-on-press-escape="false"
| :visible.sync="visible"
| width="80%"
| >
| <div class="amap-page-container">
| <div :style="{ width: '100%', height: '60vh' }">
| <el-amap
| :center="center"
| :events="events"
| :plugin="plugin"
| :zoom="zoom"
| class="amap-demo"
| vid="amap"
| >
| <el-amap-marker vid= "marker" :position="center" :label="label" ></el-amap-marker >
|
| </el-amap>
| </div>
|
| <div class="img-c">
| <div class="flex">
| <el-input @input="changeCenter" class="" type="text" v-model="lng">
| <template slot="prepend">当前经度</template>
| </el-input>
| <el-input @input="changeCenter" type="text" v-model="lat">
| <template slot="prepend">当前纬度</template>
| </el-input>
| </div>
| </div>
| </div>
| <template slot="footer">
| <el-button @click="visible = false">取消</el-button>
| <el-button @click="setLng()" type="primary">确定</el-button>
| </template>
| </el-dialog>
| </template>
|
| <script>
| export default {
| props:{
| stId:'',
| },
| data() {
| const self = this;
| return {
| markerImg: '<img src="../assets/png/icon3.png" style="width:40px;height:40px;"></img>',
| stationFunction: [],
| markers: [],
| center: [113.552724, 22.255899],
| zoom: 14,
| lng: 113.552724,
| lat: 22.255899,
| loaded: false,
| visible: true,
| label:{
| content:'',
| offset:this.locations
| },
| plugin: [
| {
| enableHighAccuracy: true, //是否使用高精度定位，默认:true
| timeout: 100, //超过10秒后停止定位，默认：无穷大
| maximumAge: 0, //定位结果缓存0毫秒，默认：0
| convert: true, //自动偏移坐标，偏移后的坐标为高德坐标，默认：true
| showButton: true, //显示定位按钮，默认：true
| buttonPosition: "RB", //定位按钮停靠位置，默认：'LB'，左下角
| showMarker: true, //定位成功后在定位到的位置显示点标记，默认：true
| showCircle: true, //定位成功后用圆圈表示定位精度范围，默认：true
| panToLocation: true, //定位成功后将定位到的位置作为地图中心点，默认：true
| zoomToAccuracy: true, //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：f
| extensions: "all",
| pName: "Geolocation",
|
| },
| ],
| events: {
| click(e) {
| self.markers = [];
| let { lng, lat } = e.lnglat;
| self.lng = lng;
| self.lat = lat;
| self.center = [lng, lat];
| self.markers.push([lng, lat]);
| },
| },
| };
| },
| computed:{
| locations(){
| return [this.lng,this.lat]
| }
| },
| methods: {
| changeCenter() {
| this.center = [this.lng, this.lat];
| this.markers.push([this.lng, this.lat]);
| },
| popCenters(a,b){
| if(a && b){
| this.center =[a,b];
| [this.lng, this.lat]=[a,b];
| this.markers.push([a, b]);
| }
| },
| setLng(){
| this.$parent.changeLocation(this.lat,this.lng);
| this.visible = false;
| }
| },
| };
| </script>
| <style>
| .el-dialog__body {
| padding: 10px 20px;
| }
|
|
| .img-c {
| height: 30px;
| line-height: 60px;
| margin-top: 10px;
| }
| .img-cc {
| height: 30px;
| margin-top: 18px;
| }
| .flex {
| display: flex;
| }
| .changzhan {
| margin-top: 10px;
| line-height: 35px;
| }
| .checkboxedd {
| padding-left: 20px;
| }
| .changzhantype{
| width: 100px;
| background-color: #F5F7FA;
| color: #909399;
| vertical-align: middle;
| display: table-cell;
| position: relative;
| border: 1px solid #DCDFE6;
| border-radius: 4px;
| padding: 0 20px;
| white-space: nowrap;
| }
| </style>
|
|
