elment-ui+vue2.0高德地图选择定位

最新推荐文章于 2024-04-25 17:22:17 发布

凡碧琪

最新推荐文章于 2024-04-25 17:22:17 发布

阅读量725

点赞数

文章标签： vue.js elementui 前端 javascript

本文链接：https://blog.csdn.net/weixin_42211302/article/details/127389575

版权

直接将以下代码保存为公共组件下.vue文件。

详细代码如下：

<template>
  <el-dialog
    title="选择定位地址"
    class="locationModal"
    :visible.sync="visible"
    width="600px"
    top="20px"
    append-to-body
    :close-on-click-modal="false"
  >
    <div class="search">
      <el-input id="input" v-model="keywords" placeholder="请输入关键字搜索" @input="handleSearch" @click.native="showResult = true" />
      <el-row v-show="showResult && list.length > 0">
        <el-col v-for="(item, index) in list" :key="index" @click.native="handleChoose(item)">
          <p>{
  { item.name }}</p>
          <span>{
  { item.district }}{
  { item.address }}</span>
        </el-col>
      </el-row>
    </div>
    <div id="mapSelect" />
    <template slot="footer">
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary" @click="handleOk">确定</el-button>
    </template>
  </el-dialog>
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader'
import { debounce