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

最新推荐文章于 2024-04-18 14:28:05 发布

张张张立宏

最新推荐文章于 2024-04-18 14:28:05 发布

阅读量2.3k

点赞数 2

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

本文链接：https://blog.csdn.net/qq_43391088/article/details/94552403

版权

最近项目需要使用地图，研究了一下，包括地图选址和搜索选值。
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>