当前位置： 首页 > news >正文

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

news 2026/3/26 20:11:21

本教程适合有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点标记+数字文本→地图中心点自动移动。

视频版教程实操如下

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

http://www.jsqmd.com/news/367682/

相关文章：

  • 大模型微调内存优化全攻略：无需昂贵显卡，打造你的AI助手
  • 如何进行 OTel ： OpenTelemetry 采用蓝图
  • Code vs Serialized AST Inputs for LLM-Based CodeSummarization: An Empirical Study
  • 【无人机三维路径规划】基于蚁群算法ACA、Astar和遗传GA算法实现无人机山地路径规划附matlab代码
  • 收藏备用｜2026年AI人才市场真相：缺口500万+，程序员吃透这篇少走3年弯路
  • 千亿美金争夺战：AI军火商为何突然“踩刹车”？Anthropic3500亿美元；OpenAI8300亿美元
  • 【MIMO通信】超越对角线RIS MIMO容量最大化Matlab复现
  • 收藏备用｜AI Agent薪资天花板曝光（60W-300W），小白/程序员入局必看
  • 必收藏！5大主流基于图的RAG框架详解（小白程序员入门必备）
  • 字节Seedance 2.0紧急叫停真人人脸上传
  • 2026六盘水购物地标口碑排名：本地人必逛的5家高性价比名单 - 精选优质企业推荐榜
  • AI应用架构师谈企业AI技术栈选型的重要性
  • 大模型幻觉问题详解：小白也能看懂的成因、分类与缓解方案（收藏版）
  • 反悔贪心练习题目
  • 免费降aigc全攻略：如何通过降ai技术降知网、维普 AI率，亲测10款降AI工具【建议收藏】
  • 论文降ai哪家最有效？深度实测10款主流降ai率工具（内附对比表）
  • Java毕设项目：基于springboot的工厂精密设备销售管理系统的设计与实现(源码+文档，讲解、调试运行，定制等)
  • 2026六枝逛街搭配指南：本地人必逛的5家好店名单出炉！ - 精选优质企业推荐榜
  • 2026六盘水买鞋避坑指南：专业售后口碑店TOP5名单公布！ - 精选优质企业推荐榜
  • 编写约会助手APP,根据约会对象，约会主题（第一次约会/纪念日/生日），预算，推荐合适的约会地点，美食，活动，还能生成约会攻略，避免约会难堪，适合年轻人。
  • Perl 运算符
  • 2026六枝特区中产消费指南：本地人私藏的5家必逛好店名单！ - 精选优质企业推荐榜
  • Ruby 文件的输入与输出
  • 数据中台在大数据领域的实时数据集成策略
  • Java毕设项目：基于springboot的助农农产品销售平台小程序(源码+文档，讲解、调试运行，定制等)
  • C# 变量详解
  • 循环神经网络（RNN）：时序数据的深度学习模型 - 教程
  • Java计算机毕设之基于Spring Boot与微信小程序的助农农产品销售平台基于springboot的助农农产品销售平台小程序（完整前后端代码+说明文档+LW，调试定制等）
  • 硬核AI技术筑牢根基，Health AI开放平台领跑健康垂直领域智能化赛道
  • ai_用例评审