MapMark.vue
3.4 KB
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 id="container" />
</template>
<script>
import AMapLoader from '@amap/amap-jsapi-loader'
window._AMapSecurityConfig = {
securityJsCode: '0909896c00dc4bf28c6ee99a43533c53'
}
var map = {}; // 最好在data外声明要不然地图会一卡一卡
var markers = []; // 最好在data外声明要不然地图会一卡一卡
export default {
components: {},
props: ['sendChildDate'],
data () {
return {
auto: null,
map: null,
markers: [],
mapData: { longitude: 104.113368, // 经纬度
latitude: 30.518559, // 经纬度
},
}
},
mounted () {
// DOM初始化完成进行地图初始化
this.initMap()
},
beforeDestroy () {
this.destroyMap();
},
methods: {
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)
})
},
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)
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;
}
}
}
}
</script>
<style lang="less">
#container {
position: relative;
padding: 0px;
margin: 0px;
width: 100%;
height: 100%;
}
.amap-icon{
img {
width:19px;
height:30px;
}
}
</style>