vue调用高德地图实现点击地图获取地点

最新推荐文章于 2025-05-14 15:30:11 发布

啊花549

最新推荐文章于 2025-05-14 15:30:11 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

文章标签： vue javascript 定位

本文链接：https://blog.csdn.net/buukyjmvni/article/details/116021484

本文介绍了如何在Vue项目中结合高德地图API实现地图组件的挂载，包括获取key、配置插件以实现定位和地址解析，并展示了如何进行模糊查询。在过程中遇到的问题是控制台开启时地图才能正常拖动和缩放，但最终问题自行解决。

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

一、获取key（百度）
二、main.js中挂载
在这里插入图片描述

三、页面使用
在这里插入图片描述

 <div class="amap-page-container">
      <el-amap-search-box
        :search-option="searchOption"
        :on-search-result="onSearchResult"
        class="search-box"
      />
      <el-amap
        ref="map"
        :amap-manager="amapManager"
        :center="center"
        :zoom="zoom"
        :plugin="plugin"
        :events="events"
        vid="amapDemo"
        class="amap-demo"
      >
        <el-amap-marker :position="center"/>
      </el-amap>
    </div>

基本设置（data的return里）：
在这里插入图片描述
标点获取位置插件和定位插件（同样在data的return里）：