基于高德地图实现地图交互功能的探索与总结

在前端开发项目中，集成地图功能并实现丰富的交互效果是一项具有挑战性但又极具实用价值的任务。最近，我在项目里负责实现基于高德地图的相关功能，包括地图初始化、输入提示、点击获取经纬度及地址等操作。在这个过程中，遇到了不少问题，经过一番钻研和实践，终于逐一解决，现在将这段经历总结出来，希望能帮助到有同样困惑的开发者。

一、功能需求概述

项目要求在页面中嵌入地图，用户能够通过输入地址关键词搜索地点，地图自动定位到该地点并显示其经纬度。同时，用户点击地图上任意位置，也能获取该点的经纬度，并通过逆地理编码将经纬度转换为详细地址显示在输入框中。此外，为了优化用户体验，还需要处理页面和特定元素滚动时相关地图提示元素的显示与隐藏问题。

二、实现过程中的关键代码及问题解决

（一）地图初始化

function atlas(lng, lat) {
    console.log(lng);
    console.log(lat);
    // 1. 定义一个变量保存地图的初始位置
    var defaultCenter = [lng, lat]; // 默认中心点（例如郑州的经纬度）

    var map = new AMap.Map("container", {
        center: defaultCenter, // 设置地图默认中心点
        zoom: 12, // 设置地图默认缩放级别
        resizeEnable: true
    });

在初始化地图时，我遇到的第一个问题是如何根据传入的经纬度设置地图的初始中心点。通过查阅高德地图的官方文档，了解到可以在创建 AMap.Map 实例时，通过 center 属性来指定地图的中心点坐标。这里我将传入的 lng 和 lat 组成数组赋值给 defaultCenter&nbs