拖拽地图/点坐标定位(高德地图)
法一:使用地图自带的UI库
<div class="mapShow"> <el-amap vid="amap" :events="events" :center="center" :zoom="zoom" :amap-manager="amapManager" map-style="amap://styles/fresh"> </el-amap> </div> private zoom: number = 16; private center: any = [119.72498, 30.235328]; private amapManager = new AMapManager(); private events: any = { init: (o: any) => { this.getLngLat(); // 地图加载完成时先定位一次 this.drag(); }, }; private getLngLat() { const map = this.amapManager.getMap(); const geolocation = new AMap.Geolocation({ enableHighAccuracy: true, // 是否使用高精度定位,默认:true timeout: 5000, // 超过10秒后停止定位,默认:5s showButton: true, buttonPosition: 'RT', // 定位按钮的停靠位置 buttonOffset: new AMap.Pixel(10, 20), // 定位按钮与设置的停靠位置的偏移量,默认:Pixel(10, 20) zoomToAccuracy: true, // 定位成功后是否自动调整地图视野到定位点 }); map.addControl(geolocation); geolocation.getCurrentPosition((status: string, result: any) => { if (status === 'complete') { this.onComplete(result); } else { this.onError(result); } }); } // 获取位置成功 private onComplete(data: any) { const Map = this.amapManager.getMap(); const center = [data.position.lng, data.position.lat]; const LngLat = this.gcj02_To_Wgs84_exact(center[1], center[0]); this.lng = LngLat[1]; this.lat = LngLat[0]; } // 解析定位错误信息 private onError(data: any) { dd.device.notification.toast({ text: '失败了', // 提示信息 duration: 0.5, }); }
// 拖拽定位
private drag() {
const Map = this.amapManager.getMap();
AMapUI.loadUI(['misc/PositionPicker'], (PositionPicker: any) => {
const positionPicker = new PositionPicker({
mode: 'dragMap', // 如果要改为拖拽点位则为'dragMarker'
map: Map,
iconStyle: { // 自定义外观
url: '//webapi.amap.com/ui/1.0/assets/position-picker2.png',
ancher: [24, 40],
size: [48, 48],
},
});
positionPicker.on('success', (positionResult: any) => {
this.onComplete(positionResult);
// console.log(positionResult.position.lng);
});
positionPicker.on('fail', (positionResult: any) => {
this.onError(positionResult);
});
positionPicker.start();
// Map.panBy(0, 1);
});
}
方法二:监听地图移动,移动结束后获取center添加点标记 (如需要改成拖拽点标记可监听点标记的移动。)
<div class="mapShow"> <el-amap vid="amap" :events="events" :center="center" :zoom="zoom" :amap-manager="amapManager" map-style="amap://styles/fresh"> </el-amap> </div> private zoom: number = 16; private center: any = [119.72498, 30.235328]; private amapManager = new AMapManager(); private events: any = { init: (o: any) => { this.getLngLat(); this.addMarker(); this.dragMap(); }, }; // 设置初始坐标 private points: any = [ { lng: '120.724906', lat: '31.237354', }, ]; // 声明一个数组来存储点标记组 private marker: any = []; // 获取当前位置 private getLngLat() { const map = this.amapManager.getMap(); const geolocation = new AMap.Geolocation({ enableHighAccuracy: true, // 是否使用高精度定位,默认:true timeout: 5000, // 超过10秒后停止定位,默认:5s showButton: true, buttonPosition: 'RT', // 定位按钮的停靠位置 buttonOffset: new AMap.Pixel(10, 20), // 定位按钮与设置的停靠位置的偏移量,默认:Pixel(10, 20) zoomToAccuracy: true, // 定位成功后是否自动调整地图视野到定位点 }); map.addControl(geolocation); geolocation.getCurrentPosition((status: string, result: any) => { if (status === 'complete') { this.onComplete(result); } else { this.onError(result); } }); } // 获取位置成功 private onComplete(data: any) { const Map = this.amapManager.getMap(); const center = [data.position.lng, data.position.lat]; const LngLat = this.gcj02_To_Wgs84_exact(center[1], center[0]); this.lng = LngLat[1]; this.lat = LngLat[0]; } // 解析定位错误信息 private onError(data: any) { dd.device.notification.toast({ text: '失败了', // 提示信息 duration: 0.5, }); } private addMarker() { const {points} = this; const map = this.amapManager.getMap(); const amp = AMap as any; points.forEach((v: any) => { const markerContent = `<div class="icon active"></div>`; const marker = new amp.Marker({ position: [v.lng, v.lat], content: markerContent, extData: { lng: v.lng, lat: v.lat, name: v.name, content: v.content, }, }); this.marker.push(marker); map.add(marker); }); } // 监听地图移动 private dragMap() { const map = this.amapManager.getMap(); map.on('moveend', this.mapMoveend); // 移动结束触发 } private mapMoveend() { const map = this.amapManager.getMap(); map.remove(this.marker); const center = map.getCenter(); console.log(center.lng); this.points[0].lng = center.lng; this.points[0].lat = center.lat; this.addMarker(); }