在vue项目中引入高德地图UI组件

最新推荐文章于 2025-07-16 12:59:52 发布

张张张立宏

最新推荐文章于 2025-07-16 12:59:52 发布

阅读量2.5k

点赞数 2

CC 4.0 BY-SA版权

文章标签： vue.js 高德地图api

本文链接：https://blog.youkuaiyun.com/qq_43391088/article/details/94552403

本文介绍了如何在Vue项目中集成高德地图UI组件，通过详细步骤和示例代码展示了地图功能的实现，包括地图显示和搜索功能。

最近项目需要使用地图，研究了一下，包括地图选址和搜索选值。
vue-amap文档内有项目构建demo，下面直接进入代码。


<!--搜索框-->
<div class="searchStyle">
  <van-search id="input" placeholder="请输入地址" v-model="obj.address" background="#F2F2F2" @keyup="getAddress"/>
</div>

<!--地图-->
<div id="container">
  <el-amap ref="map" vid="amapDemo" :zoom="zoom" :center="mapCenter" class="amap-demo" :plugin="plugin"
           :events="events">
    <el-amap-marker v-for="(marker,index) in markers" :position="marker" :key="index"></el-amap-marker>
  </el-amap>
</div>

<!--确定按钮-->
<van-row>
  <van-col span="22" offset="1">
    <van-button class="confirmBtn" @click="confirm">
      确定
    </van-button>
  </van-col>
<