效果:在高德地图中拖拽marker获取当前的坐标点,再根据当前的坐标点反查出当前的地址详细
效果:
实现方式:
一、先参考下文将高德地图安装到项目中
vue项目中使用高德地图_vue 使用高德地图_前端-文龙刚的博客-CSDN博客
二、全部代码
<template>
<!-- 用来显示地图 -->
<div id="Map" style="height: 100vh;">
<div class="loction">
<el-descriptions title="地址信息" border>
<el-descriptions-item label="lng" :span="2">{{lng}}</el-descriptions-item>
<el-descriptions-item label="lat" :span="2">{{lat}}</el-descriptions-item>
<el-descriptions-item label="详细地址">{{ addersTextInfo }}</el-descriptions-item>
</el-descriptions>
</div>
</div>
</template>
<script>
//引入高德地图
import AMapLoader from '@amap/amap-jsapi-loader'
export default {
name: 'MapIndex',
data() {
return {
map: null, //地图实例
lng:'',
lat:'',
addersTextInfo:''
};
},
mounted() {
this.initMap()
},
methods: {
initMap() {
AMapLoader.load({
key: "key", // 申请好的Web端开发者Key,首次调用 load 时必填
//2.0版本太卡了 ,所以使用的1.4.0版本 其插件也有不同 如:ToolBar
version: "1.4.0", // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15
resizeEnable: true,
plugin: [
'AMap.Geocoder',地图编码
'AMap.Autocomplete',// 输入提示插件
'AMap.PlaceSearch',// POI搜索插件
'AMap.OverView',// 地图鹰眼插件
'AMap.MapType',// 类别切换控件,实现默认图层与卫星图、实施交通图层之间切换的控制
'AMap.PolyEditor',// 编辑 折线多,边形
'AMap.CircleEditor',// 圆形编辑器插件
'AMap.ControlBar',
'AMap.MouseTool',
'AMap.GeometryUtil',
'AMap.DistrictSearch',
'AMap.TruckDriving',// 路径规划
"AMap.ToolBar", //工具条
"AMap.Scale", // 比例尺
"AMap.Geolocation", // 定位控件,用来获取和展示用户主机所在的经纬度位置
], // 需要使用的的插件列表,如比例尺'AMap.Scale'等
}).then((AMap) => {
var that = this
console.log(AMap);
this.map = new AMap.Map("Map", { //设置地图容器id
//这里的参数有许多可根据需要添加 点击下面《map地图参数》跳转
viewMode: "3D", //是否为3D地图模式
zoom: 14, //初始化地图级别
resizeEnable: true,
// center: [116.397128, 39.916527], //初始化地图中心点位置
});
//设置可拖动坐标-S
var marker = new AMap.Marker({
map: this.map,
// position: this.map.getCenter(),
icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
offset: new AMap.Pixel(-13, -30),
// 设置是否可以拖拽
draggable: true,
cursor: 'move',
// 设置拖拽效果
raiseOnDrag: true
// position: [116.397128, 39.916527],
});
marker.on('dragend', function() {//拖动坐标获取新坐标
console.log('最新坐标:',marker.getPosition())
var coordinate = marker.getPosition()
that.lng=coordinate.lng
that.lat=coordinate.lat
//反查地址-S
let geocoder
AMap.plugin('AMap.Geocoder',function(){
geocoder = new AMap.Geocoder()
})
geocoder.getAddress([that.lng,that.lat],function (status, result) {
if (status === "complete" && result.info === "OK") {
console.log('地址获取成功:',result.regeocode.formattedAddress)
that.addersTextInfo = result.regeocode.formattedAddress
}
});
//反查地址-E
});
marker.setMap(this.map);
//设置可拖动坐标-E
// 设置点标记的动画效果,此处为弹跳效果
marker.setAnimation('AMAP_ANIMATION_BOUNCE');
}).catch(e => {
console.log(e);
})
}
},
};
</script>
<style scoped>
.loction{top:10px;left:50px;width:500px;position:fixed;z-index:9;}
</style>
万事大吉 (#^.^#)