PC电脑端实现高德地图滑动选点
下面是接收的数据格式:
本项目是使用vue3 +JS完整代码和解释注释放在代码段上了,大家可以参考
我们首先要下载高德地图
npm i @amap/amap-jsapi-loader --save
然后引用并创建实例即可
<template>
<!-- 地图容器 -->
<div class="map-container">
<div ref="mapView" class="map-view"></div>
</div>
</template>
<script setup>
import { ref, onMounted, onUnmounted } from 'vue'; // 导入Vue的Composition API
import AMapLoader from '@amap/amap-jsapi-loader'; // 导入高德地图JS API加载器
// 定义状态
const mapView = ref(null); // Vue ref引用,用于获取地图容器DOM元素
const addressList = ref([]); // Vue ref引用,存储地址列表
let map; // 定义全局变量map,用于保存地图实例
// 当组件挂载完成后执行
onMounted(() => {
const options = {
resizeEnable: true, // 允许地图自适应大小
zoom: 16, // 初始缩放级别
};
// 配置安全密钥
window._AMapSecurityConfig = {
securityJsCode: '', // 高德地图API秘钥
};
// 异步加载高德地图API
AMapLoader.load({
key: '', // 高德地图API KEY
version: '2.0', // API版本
plugins: [], // 使用的插件列表
AMapUI: {
version: '1.1', // AMapUI版本
plugins: ['misc/PositionPicker', 'misc/PoiPicker'], // AMapUI插件
},
})
.then((AMap) => {
// 创建地图实例
map = new AMap.Map(mapView.value, options);
// 配置精准地理定位插件
map.plugin(['AMap.Geolocation'], () => {
const geolocation = new AMap.Geolocation({
enableHighAccuracy: true, // 开启高精度定位模式
timeout: 10000, // 请求超时时间
buttonOffset: new AMap.Pixel(10, 20), // 定位按钮偏移量
zoomToAccuracy: true, // 缩放至定位精度范围
buttonPosition: 'RB', // 定位按钮位置
needAddress: true, // 是否返回地址信息
});
map.addControl(geolocation); // 添加定位插件到地图
// 当前定位成功回调
geolocation.getCurrentPosition((status, result) => {
if (status === 'complete') {
onComplete(result);
} else {
onError(result);
}
});
});
// 鼠标点击事件处理器
const handlerMapClick = (e) => {
// 设置地图中心点为点击位置
map.setCenter(new AMap.LngLat(e.lnglat.getLng(), e.lnglat.getLat()));
};
// 成功获取当前位置回调
const onComplete = (data) => {
map.setCenter(data.position); // 设置地图中心点
};
// 获取当前位置失败回调
const onError = (error) => {
console.log('error', error);
};
// 绑定点击事件
map.on('click', handlerMapClick);
// 初始化位置选择器
const positionPicker = new AMapUI.PositionPicker({
mode: 'dragMap', // 拖动地图模式
map, // 关联的地图实例
});
// 位置选择器成功回调
positionPicker.on('success', (positionResult) => {
console.log('成功的信息', positionResult);
addressList.value = positionResult.regeocode.pois; // 更新地址列表
});
// 位置选择器失败回调
positionPicker.on('fail', (positionResult) => {
console.log('positionResult', positionResult);
});
// 启动位置选择器
positionPicker.start();
// 初始化POI选择器
const poiPicker = new AMapUI.PoiPicker({
input: mapView.value.querySelector('.picker-input'), // 输入框元素
});
// POI选择器回调
poiPicker.on('poiPicked', (poiResult) => {
map.setCenter(poiResult.item.location); // 设置地图中心点为选中的POI位置
});
})
.catch(() => {
throw '地图加载失败,请重新加载'; // 异常处理
});
});
// 组件卸载时执行
onUnmounted(() => {
if (map) {
map.destroy(); // 销毁地图实例
map.clearEvents('click'); // 清除点击事件监听器
}
});
</script>
<style lang="scss" scoped>
// 地图容器样式
.map-container {
background-color: #fff;
width: 100%;
height: 100vh;
.map-view {
position: relative;
width: 100%;
height: 50vh;
position: fixed !important;
top: 0;
}
input {
width: 100%;
height: 47px;
padding: 8px 15px;
position: fixed;
z-index: 10;
top: 0;
outline: none;
border: 1px solid #d3d3d3;
border-radius: 5px;
background-color: #fff;
}
.address-wrapper {
padding-top: 50vh;
.address-list {
position: relative;
height: 50vh;
overflow: auto;
&-item {
font-size: 12px;
padding: 6px 12px;
border-bottom: 1px solid #e8e8e8;
p:first-child {
color: #333;
font-size: 13px;
}
p:last-child {
color: #666;
}
}
}
}
}
</style>
文章就到此结束了,大家如果感兴趣可以留言关注,我们一起学习😄😄😄
👋👋👋👋👋👋👋👋👋👋👋👋👋👋👋👋👋👋👋👋👋👋👋👋👋👋👋👋👋