本教程适合有HTML、CSS、JavaScript及Vue框架基础的开发者，借助高德地图开放平台API，结合Vue框架和Tailwind CSS实现高德地图的核心搜索功能，包含地图初始化与定位、搜索框与输入提示、POI搜索与结果展示、点标记与文本添加、地图中心点移动等功能，同时完成界面交互和样式美化。

课程前置知识与技术栈

前置要求

具备网页开发基础，了解HTML、CSS、JavaScript及Vue框架基本用法。

核心技术栈

• 前端框架：Vue
• 样式解决方案：Tailwind CSS
• GIS平台：高德地图开放平台
• 核心目标：实现输入提示、POI搜索、点标记添加、地图中心点移动等高德地图同款搜索功能。

1. 搭建项目环境并创建地图实例

步骤1：创建Vue项目

使用Vite快速搭建Vue项目：

npm init vite

步骤2：安装Tailwind CSS

npm install tailwindcss@3.4.17 postcss autoprefixer
npx tailwindcss init -p

步骤3：安装高德地图Loader

npm install @amap/amap-jsapi-loader

步骤4：初始化高德地图实例

在Vue组件中通过Loader加载高德地图，初始化地图容器（注意：需先在高德开放平台注册账号、创建应用，获取专属key和安全密钥）：

import AMapLoader from '@amap/amap-jsapi-loader';
import { onMounted } from 'vue';

onMounted(async () => {
    const AMap = await AMapLoader.load({
        key: '你的高德地图key',
        version: '2.0',
        plugins: []
    });
    const map = new AMap.Map('map', {
        zoom: 13,
        center: [116.397428, 39.90923] // 默认北京中心点
    });
});

页面中需添加地图容器DOM：

<div id="map" style="width: 100%; height: 800px;"></div>

2. 实现用户当前位置定位

将默认的北京中心点修改为用户当前实际位置，需加载高德定位插件：

步骤1：加载定位插件

修改Loader的plugins配置，添加定位插件：

plugins: ['AMap.Geolocation']

步骤2：创建定位实例并获取位置、移动地图中心点

// 初始化地图后创建定位实例
const geolocation = new AMap.Geolocation({
    enableHighAccuracy: true, // 开启高精度定位
    timeout: 10000, // 定位超时时间
    buttonPosition: 'RB' // 定位按钮显示在地图右下角
});

// 获取当前位置信息
geolocation.getCurrentPosition((status, result) => {
    if (status === 'complete') {
        const position = [result.position.lng, result.position.lat];
        map.setCenter(position); // 将地图中心点移动到用户当前位置
    }
});

步骤3：为用户位置添加点标记

在获取到的用户位置上添加高德默认样式的点标记：

// 需在getCurrentPosition的success回调中执行
const marker = new AMap.Marker({
    position: position, // 用户当前经纬度
    map: map // 绑定到当前地图实例
});

步骤4：获取用户当前城市信息（用于后续城市限定搜索）

geolocation.getCityInfo((status, result) => {
    if (status === 'complete') {
        const city = result.city; // 用户当前所在城市
        const cityCode = result.adcode; // 城市行政编码
        // 可将城市信息保存为全局变量，供后续搜索使用
    }
});

3. 添加搜索框（结合Tailwind CSS样式）

在页面中添加搜索输入框，使用Tailwind CSS实现样式美化，通过Vue的v-model实现数据双向绑定：

<template>
    <!-- 搜索框固定在地图左上角 -->
    <div class="fixed top-5 left-5 w-64 z-10">
        <input
            v-model="searchText"
            placeholder="搜索位置"
            class="w-full p-2 rounded shadow outline-none bg-white"
        />
    </div>
    <div id="map" style="width: 100%; height: 800px;"></div>
</template>

<script setup>
import { ref } from 'vue';
// 搜索框绑定的变量
const searchText = ref('');
// 其他地图初始化代码...
</script>

4. 实现搜索框输入提示功能

加载高德输入提示插件，根据用户输入的关键词，返回相关的地址提示结果：

步骤1：加载输入提示插件

修改Loader的plugins配置，添加自动完成插件：

plugins: ['AMap.Geolocation', 'AMap.Autocomplete']

步骤2：创建Autocomplete实例并监听搜索事件

// 需在获取到用户城市信息后创建实例，限定当前城市搜索
const autocomplete = new AMap.Autocomplete({
    city: city // 传入步骤2获取的用户当前城市
});

// 搜索回调函数，可绑定到搜索框的input或click事件
const searchResult = ref([]); // 用于存储输入提示结果
function handleSearch() {
    if (!searchText.value) return;
    autocomplete.search(searchText.value, (status, result) => {
        if (status === 'complete') {
            searchResult.value = result.tips; // 保存提示结果，供页面渲染
        }
    });
}

步骤3：实现搜索关键字高亮

对返回的提示结果，将用户输入的关键字进行蓝色高亮处理：

function highlight(text, keyword) {
    const index = text.indexOf(keyword);
    if (index !== -1) {
        return text.slice(0, index) +
            '<span style="color: blue">' + keyword + '</span>' +
            text.slice(index + keyword.length);
    }
    return text;
}

使用：页面渲染搜索结果时，通过v-html调用该方法即可。

5. 实现POI搜索与结果展示

加载高德POI搜索插件，根据用户选中的输入提示结果，搜索对应的POI详情（名称、地址、经纬度等）：

步骤1：加载POI搜索插件

修改Loader的plugins配置，添加POI搜索插件：

plugins: ['AMap.Geolocation', 'AMap.Autocomplete', 'AMap.PlaceSearch']

步骤2：创建PlaceSearch实例并实现选中搜索

// 保存POI搜索结果的变量
const poiResults = ref([]);
// 控制POI结果展示的变量
const showPOI = ref(false);
// 创建POI搜索实例，限定当前城市
const placeSearch = new AMap.PlaceSearch({
    city: city
});

// 选中输入提示结果后的回调函数
function handleSelect(name) {
    searchText.value = name; // 将选中的名称回显到搜索框
    showPOI.value = true; // 显示POI结果列表
    // 执行POI搜索
    placeSearch.search(name, (status, result) => {
        if (status === 'complete') {
            poiResults.value = result.poiList.pois; // 保存POI搜索结果
        }
    });
}

6. 为POI搜索结果添加地图点标记与文本

为每个搜索到的POI添加自定义红色图标的点标记，并在标记上添加数字文本，实现与POI结果列表的一一对应：

步骤1：添加POI点标记（自定义图标）

// 需在POI搜索的success回调中执行
poiResults.value.forEach((poi, index) => {
    const marker = new AMap.Marker({
        position: [poi.location.lng, poi.location.lat], // POI的经纬度
        icon: 'location_red.png', // 自定义红色图标路径
        map: map
    });
});

步骤2：为点标记添加数字文本标记

先导入AMap.Text类型，再为每个POI标记添加中心对齐的白色数字文本：

import AMapText from '@amap/amap-jsapi-types/lib/AMap/Text';

// 在创建POI标记的循环中添加
poiResults.value.forEach((poi, index) => {
    // 先创建点标记...
    // 再创建文本标记
    const text = new AMap.Text({
        text: (index + 1).toString(), // 显示数字序号（从1开始）
        position: [poi.location.lng, poi.location.lat], // 与POI标记同一位置
        anchor: 'center', // 文本中心对齐
        style: {
            fontSize: '12px',
            color: '#fff', // 白色文本
            backgroundColor: 'transparent' // 透明背景
        }
    });
    text.setMap(map); // 将文本标记绑定到地图
});

7. 点击POI结果，移动地图中心点

实现高德地图同款效果：搜索到POI结果后，将地图中心点自动移动到第一个POI的位置，也可在点击POI列表项时触发：

// POI搜索成功后执行
if (poiResults.value.length > 0) {
    const firstPoi = poiResults.value[0];
    map.setCenter([firstPoi.location.lng, firstPoi.location.lat]);
}

核心功能总结

本教程通过Vue+Tailwind CSS+高德地图JS API 2.0，实现了高德地图的核心搜索流程：
项目搭建&地图初始化 → 用户高精度定位&点标记 → 城市信息获取 → Tailwind CSS样式搜索框 → 输入提示&关键字高亮 → POI搜索&结果展示 → POI点标记+数字文本 → 地图中心点自动移动。

视频版教程实操如下

大家可以+下方小助手↓备注【高德地图开发】无偿获取