革新PC导航体验：一滑即达，高德地图滑动选点功能上线

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>

文章就到此结束了，大家如果感兴趣可以留言关注，我们一起学习😄😄😄

👋👋👋👋👋👋👋👋👋👋👋👋👋👋👋👋👋👋👋👋👋👋👋👋👋👋👋👋👋