vue-amap 实现高德地图定位 + 搜索 +回显_el-amap-search-box-优快云博客

本文链接：https://blog.youkuaiyun.com/Tkings233/article/details/122804818

本文档详细介绍了如何在Vue项目中集成高德地图API，包括注册开发者账号、安装vue-amap依赖、配置地图插件、获取和设置地图坐标、实现定位和地址解析功能。同时展示了父子组件间如何传递经纬度信息，实现实时位置回显。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.注册成为开发者 -》申请秘钥key 调用高德api

高德地图开放平台：https://lbs.amap.com/?ref=https://console.amap.com/dev/index

此处有详细步骤：(注：有些功能-》申请的 key 必须配备安全密钥 jscode 一起使用)

此处有详细步骤：Vue（vue-amap）接入高德地图获取坐标与地址信息_Your-Nikee的博客-优快云博客_vue-amap 根据地点查询坐标

2.安装vue-amap 依赖

npm install vue-amap --save

3. 在项目 main.js 中引入（根据所需功能引入）

import VueAMap from 'vue-amap';   //引入高德
VueAMap.initAMapApiLoader({
  key: '写入申请的key',
  //插件集合
  plugin: [
    'AMap.Geolocation',  //定位空间，用来获取和展示用户主机所在的经纬度位置
    ' AMap.Autocomplete ',  //输入提示插件
    ' AMap.PlaceSearch ', //POI搜索插件
    ' AMap.Scale ',   //右下角缩略图插件，比例尺
    ' AMap.OverView ', //地图鹰眼插件
    ' AMap.ToolBar ',  //地图工具条
    ' AMap.MapType ',  //类别切换空间，实现默认图层与卫星图，实施交通层之间切换的控制
    ' AMap.PolyEditor ', //编辑 折线多边形
    ' AMap.CircleEditor ',
    "AMap.Geocoder"     //地图编码
  ]
});

4.在需要地图的组件中调用

1. map子页面

html：

一些属性：   
<!--
      amap-manager： 地图管理对象
      vid：地图容器节点的ID
      zooms： 地图显示的缩放级别范围，在PC上，默认范围[3,18]，取值范围[3-18]；在移动设备上，默 
              认范围[3-19]，取值范围[3-19]
      center： 地图中心点坐标值
      plugin：地图使用的插件
      events： 事件
    -->

<template>
  <div class="amap-page-container">
    <!-- 搜索条件 是个对象searchOption 属性是city城市名，citylimit：false； 搜索回调函数 -->
    <el-amap-search-box
      class="search-box"
      :search-option="searchOption"
      :on-search-result="onSearchResult"
    ></el-amap-search-box>
   
    <el-amap
      ref="map"
      vid="amapDemo"
      :amap-manager="amapManager"
      :center="center"
      :zoom="12"
      :plugin&