超详细的vue3+高德地图实现模糊搜索功能

高德地图官网地址:点击进入

我的配置:

打包用的是webpack,vite踩坑后打算再观望一阵。

我的配置

第一步:完善高德地图api的基本配置

  1. 先注册开发者账号,进入应用管理界面,应用管理界面就是咱右上角的那个头像,hover之后会有个弹窗,找到「应用管理」点击进入。
  2. 找到右侧的「应用管理」菜单,点开后选择我的应用选择我的应用
  3. 点击右上角创建新应用,应用类型看自己软件的定位。
  4. 点击创建好应用的添加按钮。
  5. 设置应用配置。
    ps:服务平台要选 web端(JS API) , 不要选web服务;
    域名不写表示所有域都可以访问。设置应用配置
    添加完成后,中间有个key,很长一段文字的,待会要用到:中间有个key

第二步:在vue3项目中使用高德地图api

  1. 复制刚刚创建好的 key。
  2. 在 pulic/index.html 通过CDN引入高德地图api。
    ps:CDN在这里的意指通过链接加载的某些组件库,而不是通过npm,组件通过CDN加载可以启到一定程度的加速效果。

    <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.4&key=粘贴刚刚复制好的key"></script>
    
  3. 在项目根目录创建文件 vue.config.js ,注意配置文件最好别用ts,在js文件中粘贴以下代码:
    module.exports = {
        configureWebpack: {
            externals: {
                'AMap': 'AMap' // 表示CDN引入的高德地图
            }
        }
    }
    
  4. 新建vue文件,粘贴以下css代码和结构。
    ps:css代码是搜索框的样式,高德地图也有自带。

    <template>
      <div class="box">
        <div id="container" style="width:500px; height:300px"></div>
        <div class="info">
          <div class="input-item">
            <div class="input-item-prepend">
              <span class="input-item-text" style="width:8rem;">请输入关键字</span>
            </div>
            <input id='tipinput' type="text">
          </div>
        </div>
      </div>
    </template>
    
    <style scoped lang="scss">
    @import "~@/styles/scss/_global.scss";
    .info {
      padding: .5rem .7rem;
      margin-bottom: 1rem;
      border-radius: .25rem;
      position: fixed;
      top: 1rem;
      background-color: white;
      width: auto;
      min-width: 15rem;
      border-width: 0;
      right: 1rem;
      box-shadow: 0 2px 6px 0 rgba(240, 131, 0, .5);
      .input-item {
        position: relative;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        width: 100%;
        height: 2.2rem;
        border: 1px solid $themeTextColor;
        border-radius: .2rem;
        .input-item-prepend {
          margin-right: -1px;
        }
        .input-item-prepend {
          width: 35%;
          font-size: 13px;
          border-right: 1px solid $themeTextColor;
          height: 100%;
          display: flex;
          align-items: center;
          background: rgba(240, 131, 0, .1);
          span {
            text-align: center;
          }
        }
        input {
          width: 60%;
          background: #fff;
          padding: .2rem .6rem;
          margin-left: .3rem;
          border: none;
        }
      }
    }
    </style>
    
  5. 在srcipt标签中引入AMap(高德地图)组件,并且在onMounted生命周期中使用,具体用意可以看代码中的注释。
    ps:不能在setup周期中使用,因为那时候DOM元素还未创建,找不到DOM元素。

    <script>
    import AMap from 'AMap' // 引入高德地图
    import { onMounted } from 'vue'
    export default {
      name: 'Login',
      setup () {
        onMounted(() => {
          const map = new AMap.Map('container', { // 这里表示创建地图 第一个参数表示地图的div的id
            resizeEnable: true // 表示是否在加在所在区域的地图,如果定了别的区域,比如北京,就会默认加载北京
          })
          // 使用AMap插件 第一个是搜索框插件,第二个地址信息(经纬度名字之类)的插件
          AMap.plugin(['AMap.Autocomplete', 'AMap.PlaceSearch'], function() {
            const autoOptions = {
              // 使用联想输入的input的div的id
              input: 'tipinput'
            }
            const autocomplete = new AMap.Autocomplete(autoOptions)
            const placeSearch = new AMap.PlaceSearch({
              city: '北京', // 默认城市,一定要有,不然没有放大效果
              map: map // 地图,选中会有放大功能,绑定上面创建的地图即可
            })
            AMap.event.addListener(autocomplete, 'select', function(e) {
              console.log(e.poi.location) // 获取选中的的地址的经纬度
              placeSearch.search(e.poi.name)
            })
          })
        })
        return {
        }
      }
    }
    </script>

最后附上完整代码

<template>
  <div class="box">
    <div id="container" style="width:500px; height:300px"></div>
    <div class="info">
      <div class="input-item">
        <div class="input-item-prepend">
          <span class="input-item-text" style="width:8rem;">请输入关键字</span>
        </div>
        <input id='tipinput' type="text">
      </div>
    </div>
  </div>
</template>

<script>
import AMap from 'AMap' // 引入高德地图
import { onMounted } from 'vue'
export default {
  name: 'Login',
  setup () {
    onMounted(() => {
      const map = new AMap.Map('container', { // 这里表示创建地图 第一个参数表示地图的div的id
        resizeEnable: true // 表示是否在加在所在区域的地图,如果定了别的区域,比如北京,就会默认加载北京
      })
      // 使用AMap插件 第一个是搜索框插件,第二个地址信息(经纬度名字之类)的插件
      AMap.plugin(['AMap.Autocomplete', 'AMap.PlaceSearch'], function() {
        const autoOptions = {
          // 使用联想输入的input的div的id
          input: 'tipinput'
        }
        const autocomplete = new AMap.Autocomplete(autoOptions)
        const placeSearch = new AMap.PlaceSearch({
          city: '长沙',
          map: map
        })
        AMap.event.addListener(autocomplete, 'select', function(e) {
          console.log(e.poi.location) // 获取选中的的地址的经纬度
          placeSearch.search(e.poi.name)
        })
      })
    })
    return {
    }
  }
}
</script>

<style scoped lang="scss">
@import "~@/styles/scss/_global.scss";
.info {
  padding: .5rem .7rem;
  margin-bottom: 1rem;
  border-radius: .25rem;
  position: fixed;
  top: 1rem;
  background-color: white;
  width: auto;
  min-width: 15rem;
  border-width: 0;
  right: 1rem;
  box-shadow: 0 2px 6px 0 rgba(240, 131, 0, .5);
  .input-item {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
    height: 2.2rem;
    border: 1px solid $themeTextColor;
    border-radius: .2rem;
    .input-item-prepend {
      margin-right: -1px;
    }
    .input-item-prepend {
      width: 35%;
      font-size: 13px;
      border-right: 1px solid $themeTextColor;
      height: 100%;
      display: flex;
      align-items: center;
      background: rgba(240, 131, 0, .1);
      span {
        text-align: center;
      }
    }
    input {
      width: 60%;
      background: #fff;
      padding: .2rem .6rem;
      margin-left: .3rem;
      border: none;
    }
  }
}
</style>

最后效果:

超详细的vue3+高德地图实现模糊搜索功能

「点点赞赏,手留余香」

1

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:
1. 本站所有文章教程及资源素材均来源于网络与用户分享或为本站原创,仅限用于学习和研究。
2. 如果内容损害你的权益请联系客服QQ:1642748312给予处理。
码云笔记 » 超详细的vue3+高德地图实现模糊搜索功能

发表评论

IT互联网行业相关广告投放 更专业 更精准

立即查看 联系我们