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
| <template>
| <div>
| <el-dialog
| :title="title"
| :visible.sync="visible"
| top="30px"
| width="1000px"
| center
| :before-close="close"
| >
| <div class="searchBox">
| <el-input
| v-model="placeSearch"
| placeholder="请输入地址"
| class="input-with-select"
| >
| <el-button
| slot="append"
| icon="el-icon-search"
| @click="search"
| />
| </el-input>
| </div>
| <div id="panel" />
| <div
| v-if="visible"
| class="mapBox"
| >
| <div id="mapd" />
| </div>
| </el-dialog>
| </div>
| </template>
|
| <script>
| export default {
| props: {
| visible: { type: Boolean, required: true }
| },
| data () {
| return {
| title: '污染位置',
| map: null,
| placeSearch: null
| }
| },
| mounted () {
| this.$nextTick(() => {
| this.initMap()
| })
| },
| destroyed () {
| if (this.map) {
| this.map.destroy()
| }
| },
| methods: {
| // 初始化地图
| initMap () {
| let map = new AMap.Map('mapd', {
| resizeEnable: true,
| zooms: [3, 18],
| zoom: 15,
| center: [120.9781494, 31.4265156]
| })
| this.map = map
|
| const lnglat = new AMap.LngLat('120.9781494', '31.4265156')
| const marker = new AMap.Marker({
| position: lnglat
| })
|
| // 设置点标记的动画效果，此处为弹跳效果
| marker.setAnimation('AMAP_ANIMATION_BOUNCE')
| marker.setMap(this.map)
| AMap.service(['AMap.PlaceSearch'], function () {
| // 构造地点查询类
| var placeSearch = new AMap.PlaceSearch({
| pageSize: 5, // 单页显示结果条数
| pageIndex: 1, // 页码
| city: '010', // 兴趣点城市
| citylimit: true, // 是否强制限制在设置的城市内搜索
| map: map, // 展现结果的地图实例
| panel: 'panel', // 结果列表将在此容器中进行展示。
| autoFitView: true // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
| })
| // 关键字查询
| placeSearch.search('北京大学')
| })
| },
| search () {
| let this_ = this
| },
| close () {
| this.$emit('update:visible', false)
| }
| }
| }
| </script>
|
| <style scoped lang="scss">
| /deep/.el-dialog__body {
| height: 600px;
| .searchBox {
| margin-bottom: 10px;
| }
| .mapBox {
| width: 100%;
| height: 100%;
| padding-bottom: 30px;
| }
| }
| #mapd {
| width: 100%;
| height: 100%;
| resize: both;
| z-index: 0;
| }
| </style>
|
|
