基于VUE+Tailwind CSS的高德地图导航功能开发实战教程-开发者社区

本教程适合有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和安全密钥）：

importAMapLoaderfrom'@amap/amap-jsapi-loader';import{onMounted}from'vue';onMounted(async()=>{constAMap=awaitAMapLoader.load({key:'你的高德地图key',version:'2.0',plugins:[]});constmap=newAMap.Map('map',{zoom:13,center:[116.397428,39.90923]// 默认北京中心点});});

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

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

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

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

步骤1：加载定位插件

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

plugins:['AMap.Geolocation']

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

// 初始化地图后创建定位实例constgeolocation=newAMap.Geolocation({enableHighAccuracy:true,// 开启高精度定位timeout:10000,// 定位超时时间buttonPosition:'RB'// 定位按钮显示在地图右下角});// 获取当前位置信息geolocation.getCurrentPosition((status,result)=>{if(status==='complete'){constposition=[result.position.lng,result.position.lat];map.setCenter(position);// 将地图中心点移动到用户当前位置}});

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

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

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

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

geolocation.getCityInfo((status,result)=>{if(status==='complete'){constcity=result.city;// 用户当前所在城市constcityCode=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实例并监听搜索事件

// 需在获取到用户城市信息后创建实例，限定当前城市搜索constautocomplete=newAMap.Autocomplete({city:city// 传入步骤2获取的用户当前城市});// 搜索回调函数，可绑定到搜索框的input或click事件constsearchResult=ref([]);// 用于存储输入提示结果functionhandleSearch(){if(!searchText.value)return;autocomplete.search(searchText.value,(status,result)=>{if(status==='complete'){searchResult.value=result.tips;// 保存提示结果，供页面渲染}});}

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

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

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

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

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

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

步骤1：加载POI搜索插件

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

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

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

// 保存POI搜索结果的变量constpoiResults=ref([]);// 控制POI结果展示的变量constshowPOI=ref(false);// 创建POI搜索实例，限定当前城市constplaceSearch=newAMap.PlaceSearch({city:city});// 选中输入提示结果后的回调函数functionhandleSelect(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)=>{constmarker=newAMap.Marker({position:[poi.location.lng,poi.location.lat],// POI的经纬度icon:'location_red.png',// 自定义红色图标路径map:map});});

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

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

importAMapTextfrom'@amap/amap-jsapi-types/lib/AMap/Text';// 在创建POI标记的循环中添加poiResults.value.forEach((poi,index)=>{// 先创建点标记...// 再创建文本标记consttext=newAMap.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){constfirstPoi=poiResults.value[0];map.setCenter([firstPoi.location.lng,firstPoi.location.lat]);}

核心功能总结

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