vue 基于高德地图封装选点和模糊搜索选择地址组件

最新推荐文章于 2024-07-25 11:05:20 发布

baizhx_

最新推荐文章于 2024-07-25 11:05:20 发布

阅读量1k

点赞数

分类专栏：高德地图文章标签： vue.js

本文链接：https://blog.csdn.net/m0_61367820/article/details/126039213

版权

说明：本组件地图基于上个作品封装的高德地图基础组件基础上写的，初始化地图部分可自行替换

地图基础组件封装地址

先上效果图

组件完成代码

<template>
  <div class="point-map">
    <!-- 地图选带你弹框 -->
    <el-dialog
        :title="title"
        :visible.sync="visiable"
        custom-class="point-map-dialog"
        :before-close="handleClose"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
    >
      <div class="choose-point-content">
        <div id="r-result" class="searchHeaders">
          <el-input
              style="width: 250px"
              placeholder="输入地址查询"
              id="suggestIds"
              @focus="initAuto()"
              @input="searchMap"
              v-model="searchText"
          >
          </el-input>
        </div>
        <div class="right-address">
          <el-form
              ref="addressForm"
              label-position="position"
              label-width="60px"
              :rules="rules"
              :model="addressForm"
          >
            <el-form-item label="地址" prop="address">
              <el-input
                  v-model.trim="addressForm.address"
                  placeholder="地图选点地址"
                  disabled
              ></el-input>
            </el-form-item>
          </el-form>
        </div>
        <div id="point-map" style="width: 100%; height: 500px">
          <base-map ref="baseMap" @init="initMap"></base-map>
        </div>
      </div>
      <div
          class="slot-foote