e5b57447
 杨鑫
'分包问卷'
|
1
|
<template>
|
d64cd58f
 wesley88
上传验收小程序
|
2
|
<div id="container" />
|
|
e5b57447
杨鑫
'分包问卷'
|
3
4
5
6
|
</template>
<script>
import AMapLoader from '@amap/amap-jsapi-loader'
|
|
d64cd58f
wesley88
上传验收小程序
|
7
|
window._AMapSecurityConfig = {
|
|
e5b57447
杨鑫
'分包问卷'
|
8
|
securityJsCode: '0909896c00dc4bf28c6ee99a43533c53'
|
|
d64cd58f
wesley88
上传验收小程序
|
9
10
11
|
}
var map = {}; // 最好在data外声明要不然地图会一卡一卡
var markers = []; // 最好在data外声明要不然地图会一卡一卡
|
|
e5b57447
杨鑫
'分包问卷'
|
12
|
export default {
|
|
d64cd58f
wesley88
上传验收小程序
|
13
14
15
|
components: {},
props: ['sendChildDate'],
data () {
|
|
e5b57447
杨鑫
'分包问卷'
|
16
17
18
|
return {
auto: null,
map: null,
|
|
d64cd58f
wesley88
上传验收小程序
|
19
20
21
22
|
markers: [],
mapData: { longitude: 104.113368, // 经纬度
latitude: 30.518559, // 经纬度
},
|
|
e5b57447
杨鑫
'分包问卷'
|
23
24
|
}
},
|
|
d64cd58f
wesley88
上传验收小程序
|
25
26
27
28
29
30
31
|
mounted () {
// DOM初始化完成进行地图初始化
this.initMap()
},
beforeDestroy () {
this.destroyMap();
},
|
|
e5b57447
杨鑫
'分包问卷'
|
32
|
methods: {
|
|
d64cd58f
wesley88
上传验收小程序
|
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
|
initMap () {
console.log(AMapLoader.load);
AMapLoader.load({
key: '438a727f8ff61d71f33694f386c108c3', // 申请好的Web端开发者Key，首次调用 load 时必填
terrain: true,
version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
plugins: ['AMap.ToolBar', 'AMap.Scale', 'AMap.HawkEye', 'AMap.Geolocation', 'AMap.AutoComplete', 'AMap.Marker'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
})
.then(AMap => {
this.map = new AMap.Map('container', {
// 设置地图容器id
viewMode: '3D', // 是否为3D地图模式
zoom: 10, // 初始化地图级别
center: [104.113368, 30.518559] // 初始化地图中心点位置
});
this.map.addControl(new AMap.Scale())
this.map.addControl(new AMap.ToolBar())
this.map.addControl(new AMap.HawkEye())
this.map.addControl(new AMap.Geolocation())
this.markPoints()
this.latitude()
})
.catch(e => {
console.log(e)
})
|
|
e5b57447
杨鑫
'分包问卷'
|
58
|
},
|
|
d64cd58f
wesley88
上传验收小程序
|
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
|
markPoints () {
// 创建一个 Marker 实例：
const marker = new AMap.Marker({
icon: new AMap.Icon({
// size: new AMap.Size(19, 32),
// anchor:new AMap.Pixel(20, 30),
image: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png', // 默认图标的URL
}),
position: new AMap.LngLat(this.mapData.longitude, this.mapData.latitude), // 经纬度对象，也可 以是经纬度构成的一维数组[lng, lat]
});
markers.push(marker)
// 将创建的点标记添加到已有的地图实例：
this.map.add(marker);
this.map.setFitView();
},
// 点击获取经纬度
latitude () {
this.map.on('click', (ev) => {
// console.log(ev)
|
|
e5b57447
杨鑫
'分包问卷'
|
78
|
|
|
d64cd58f
wesley88
上传验收小程序
|
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
|
this.map.remove(markers);
// 触发事件的地理坐标，AMap.LngLat 类型
const lnglat = ev.lnglat;
// 触发事件的像素坐标，AMap.Pixel 类型
const pixel = ev.pixel;
// 触发事件类型
const type = ev.type;
this.mapData.longitude = lnglat.lng
this.mapData.latitude = lnglat.lat
this.markPoints()
// console.log(lnglat, pixel, type)
this.sendChildDate(this.mapData)
});
},
destroyMap () {
if (this.map) {
this.map.destroy();
this.map = null;
|
|
e5b57447
杨鑫
'分包问卷'
|
97
|
}
|
|
d64cd58f
wesley88
上传验收小程序
|
98
|
}
|
|
e5b57447
杨鑫
'分包问卷'
|
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
|
}
}
</script>
<style lang="less">
#container {
position: relative;
padding: 0px;
margin: 0px;
width: 100%;
height: 100%;
}
.amap-icon{
img {
width:19px;
height:30px;
}
}
</style>
|
