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
| var me = new Vue({
| el: '#mapVue',
| data: {
| map: null, //map
| getdata: null,
| marker: null,
| layuiLayer: null,
| nowIndex: null,
|
| LXdhStart: null,
| LXdhEnd: null,
| LxdhLine: null,
|
| activeName: 'first',
| //存放实时坐标
| lat: "",
| lng: "",
| nowPosition: '',
| resultFeedbackPopupShow: false,
| popupDisplay: "none",
| },
| methods: {
| getDataList() {
| var that = this;
| that.beginCome();
| },
| beginCome() {
| var data = [{
| "id": '100000',
| "place": '无数据',
| "state": '0',
| "dtype": '0',
| "size": '300',
| "jd": "115.822311",
| "wd": "28.646341"
| }]
| //url解码
| this.getdata = this.getQueryVariable('data') || data;
| this.map = this.beginMap(this.map, this.getdata); //创建并接受map
| this.map.invalidateSize(true); //应用地图高度
| },
| //url解码
| getQueryVariable(variable) {
| var query = window.location.search.substring(1);
| var vars = query.split("&");
| for (var i = 0; i < vars.length; i++) {
| var pair = vars[i].split("=");
| if (pair[0] == variable) { return JSON.parse(decodeURI(pair[1])); } //解码url 和 JSON
| }
| return (false);
| },
| beginMap(map, data) {
| var that = this,
| center = [data[0].wd, data[0].jd],
| url = `http://223.82.109.183:2082/api/alarm/alarm/APP-getAlarm?id=${data[0].id}`;
| // url = `http://localhost:89/alarm/alarm/APP-getAlarm?id=${data[0].id}`;
| this.nowPosition = center;
|
| var createMap = () => {
| map = L.map('map', { //初始化地图
| center: center,
| zoom: 20,
| minZoom: 2,
| maxZoom: 17,
| attributionControl: false, //去掉右下角
| zoomControl: false, //去掉缩放
| });
| L.tileLayer( //添加切片图层
| // "https://webmap-tile.sf-express.com/MapTileService/rt?x={x}&y={y}&z={z}", {//顺丰地图
| "https://webmap-tile.sf-express.com/MapTileService/rt?fetchtype=static&x={x}&y={y}&z={z}&project=sfmap&pic_size=256&pic_type=png8&data_name=361100&data_format=merged-dat&data_type=normal", { //顺丰地图
| }
| ).addTo(map);
| }
| createMap();
|
| markers.on('click', function(a) {
|
| });
| this.nowPosition = center;
| return map; //抛出map
| },
| //定位当前位置
| locationMap() {
| this.map.setView([this.lat, this.lng], 20);
| },
| getLocationData() {
| var that = this;
| var geolocation = new qq.maps.Geolocation("T7RBZ-62U3X-RSQ4P-ZZVCB-WE7JT-HRBOG", "mapqq");
| var positionNum = 0;
| var options = {
| timeout: 8000
| };
|
| function showPosition(position) {
| var adCode = position.adCode; //邮政编码
| var nation = position.nation; //中国
| var city = position.city; //城市
| var addr = position.addr; //详细地址
| that.lat = position.lat; //
| that.lng = position.lng; //火星坐标 //TODO 实现业务代码逻辑
|
| if (that.LXdhStart != null) {
| that.map.removeLayer(that.LXdhStart);
| }
|
| //绘制起点和终点
| that.LXdhStart = L.markerClusterGroup();
|
| var transportIcon = L.Icon.extend({ //图标初始化
| options: {
| iconSize: [50, 50], // 图标尺寸
| }
| });
|
| var qd = new transportIcon({
| iconUrl: './img/dingw.gif'
| });
|
| that.LXdhStart.addLayer(L.marker([that.lat, that.lng], {
| icon: qd,
| }));
|
| that.map.addLayer(that.LXdhStart);
|
| };
|
| function showErr() {
| //TODO 如果出错了调用此方法
| };
|
| geolocation.getLocation(showPosition, showErr, options);
| },
|
| },
| created() {},
| mounted() {
| this.getDataList();
| this.getLocationData();
| },
| wacth: {}
| })
|
|
