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
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
//@ts-nocheck
import React, { Component } from 'react';
import styles from './styles.less';
import { message, Icon } from 'antd';
//思路进入页面时先定位
//可以通过搜索选址
//可以通过拖拽微调选址
class GetLocation extends Component {
constructor(props) {
super(props);
this.state = {
selectionCenter: [],
};
}
componentWillMount() {
}
componentDidMount = () => {
if(!window.AMapJS){
console.log('请加载高德地图定位组件');
return false;
}
this.loader = new window.AMapJS.AMapLoader({
key: 'a8d312e3cc24b4fd12bad99780c2182a', // 公司账号配置的应用的key
// https://console.amap.com/dev/key/app
version: '1.4.8',
plugins: ['AMap.Geolocation'],
security: {
securityJsCode: 'f4a5344f0117dc8b32ee216d2311fc1a', // 公司账号配置的应用的 安全key
},
});
this.loader.load()
.then(() => {
// 加载完成
console.log('Amap地图加载完成');
this.getLocation();
if (this.props.showMap) {
this.searchSiteSelection();
}
})
.catch(e => {
console.log('-------88--99--11--12');
console.log(e);
message.error('未配置地图厂家');
return;
});
};
// 12,[116.171731,40.06682]
//获取当前定位
getLocation = () => {
/***************************************
由于Chrome、IOS10等已不再支持非安全域的浏览器定位请求,为保证定位成功率和精度,请尽快升级您的站点到HTTPS。
***************************************/
const AMap = window.AMap;
let map,
geolocation;
//加载地图,调用浏览器定位服务
map = new AMap.Map('container', {
resizeEnable: true,
});
map.plugin('AMap.Geolocation', () => {
geolocation = new AMap.Geolocation({
enableHighAccuracy: true, //是否使用高精度定位,默认:true
timeout: 1000000, //超过10秒后停止定位,默认:无穷大
buttonOffset: new AMap.Pixel(10, 20), //定位按钮与设置的停靠位置的偏移量,默认:Pixel(10, 20)
zoomToAccuracy: true, //定位成功后调整地图视野范围使定位位置及精度范围视野内可见,默认:false
buttonPosition: 'RB',
GeoLocationFirst: true,
});
map.addControl(geolocation);
geolocation.getCurrentPosition();
// /**
// * 只查询到城市
// */
// geolocation.getCityInfo((status, result) => {
// })
AMap.event.addListener(geolocation, 'complete', onComplete.bind(this)); //返回定位信息
AMap.event.addListener(geolocation, 'error', onError); //返回定位出错信息
});
//解析定位结果
function onComplete(data) {
console.log(data);
if (!this.props.showMap) {
let locationMsg = {
lng: data.position.lng, // 经度
lat: data.position.lat, // 维度
address: data.formattedAddress, // 详细地址
addressComponent: data.addressComponent,
// nearestJunction: positionResult.nearestJunction, // 最近的路口
// nearestRoad: positionResult.nearestRoad, // 最近的路
// nearestPOI: positionResult.nearestPOI, // 最近的POI
};
this.props.getLocationMsg(locationMsg);
} else {
let poi = data.position.toString()
.split(',');
// 需要通过改变this指向
this.dragSiteSelection(15, poi);
}
}
//解析定位错误信息
function onError(data) {
console.log('error', data);
var str = '定位失败,';
str += '错误信息:';
switch (data.info) {
case 'PERMISSION_DENIED':
str += '浏览器阻止了定位操作';
break;
case 'POSITION_UNAVAILBLE':
str += '无法获得当前位置';
break;
case 'TIMEOUT':
str += '定位超时';
break;
default:
str += '未知错误';
break;
}
alert(
'定位失败,请在设置==》应用==》权限管理==》位置信息权限==>打开应用定位权限',
);
}
};
//通过搜索来获取定位信息
searchSiteSelection = () => {
const AMapUI = window.AMapUI;
if (!AMapUI) {
return false;
}
AMapUI.loadUI(['misc/PoiPicker'], (PoiPicker) => {
let poiPicker = new PoiPicker({
input: 'pickerInput',
});
//初始化poiPicker
window.poiPicker = poiPicker;
//选取了某个POI
poiPicker.on('poiPicked', (poiResult) => {
let poi = poiResult.item.location.toString()
.split(',');
this.dragSiteSelection(15, poi);
});
});
};
//拖拽位置选择
dragSiteSelection = (zoom, center) => {
const AMapUI = window.AMapUI;
if (!AMapUI) {
return false;
}
AMapUI.loadUI(['misc/PositionPicker'], (PositionPicker) => {
let map = new AMap.Map('map', {
zoom: zoom,
resizeEnable: true,
center: center,
});
let positionPicker = new PositionPicker({
mode: 'dragMap', //设定为拖拽地图模式,可选'dragMap[拖拽地图]'、'dragMarker[拖拽点]',默认为'dragMap'
map: map,
// iconStyle: { //自定义图标外观
// url: '//webapi.amap.com/ui/1.0/assets/position-picker2.png', //图片地址
// ancher: [24, 40], //要显示的点大小,将缩放图片
// size: [48, 48] //锚点的位置,即被size缩放之后,图片的什么位置作为选中的位置
// }
});
positionPicker.on('success', (positionResult) => {
let locationMsg = {
lng: positionResult.position.lng, // 经度
lat: positionResult.position.lat, // 维度
address: positionResult.address, // 详细地址
nearestJunction: positionResult.nearestJunction, // 最近的路口
nearestRoad: positionResult.nearestRoad, // 最近的路
nearestPOI: positionResult.nearestPOI, // 最近的POI
};
//将数据抛出
this.props.getLocationMsg(locationMsg);
});
positionPicker.on('fail', (positionResult) => {
// 海上或海外无法获得地址信息
alert('选址失败请稍后重试');
});
positionPicker.start();
});
};
render() {
return (
<>
<a onClick={this.getLocation}><Icon type="compass" /></a>
<div
id='GetLocation'
style={{ display: this.props.showMap ? 'block' : 'none' }}>
<input
id='pickerInput'
className={styles.top}
placeholder='输入关键字选取地点'
/>
<div id='map' className={styles.map}></div>
</div>
</>
);
}
}
export default GetLocation;